Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2018
    Messaggi
    3

    Inserimento fonts in testo html

    Salve, ho dei problemi nell'inserimento di fonts in un testo nella mia pagina web , solo che non riesco ad inserire tramite css (@font-face) più fonts in una volta . Mi spiego meglio :

    codice:
    {
         font-family: 'PT Serif',TimesNewRoman,'Times New Roman',Times,Georgia,serif;
         font-size: 20px;
    }
    come si vede sono più fonts insieme.
    La domanda chiave è: come faccio ad inserirli insieme?

    io per un font soltanto, ad esempio, scrivo sul css:

    codice:
    @font-face { font-family: Dancing Script; src: url('../DancingScript.ttf'); }
    .dancing {
       font-family: 'Dancing Script','Trebuchet MS', Arial, serif;
       font-size: 20px;
    }
    e lo richiamo nel html.

    Grazie in anticipo.
    Ultima modifica di KillerWorm; 16-03-2018 a 15:09 Motivo: tag code

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Ciao e benvenuto, da quel che ho visto si dovrebbe definire una regola @font-face per ognuno dei font che vuoi includere sulla pagina.

    Qui una discussione
    https://stackoverflow.com/questions/...sing-font-face

    Qui un esempio
    http://www.htmlnest.com/css3/effects...-Fonts?eix=300
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2018
    Messaggi
    3
    Si grazie di avermi risposto, però il fatto è che appena richiamo le classi nella sezione(<div>) html, acquisisce l'ultimo per ordine di riga. in questo caso "ptser3".

    codice:
    CSS:


    codice:
    @font-face { font-family: PT Serif; src: url('./fonts/PTF56F.ttf'); }
    .ptser {
       font-family: 'PT Serif',TimesNewRoman,'Times New Roman',Times,Georgia,serif;
       font-size: 20px;
    }
    
    
    @font-face { font-family: Times New Roman; src: url('./fonts/Crimison-Italic.ttf'); }
    .ptser2 {
       font-family: 'Times New Roman';
       font-size: 20px;
    }
    
    
    @font-face { font-family: Playfair Display Italic; src: url('./fonts/PlayfairDisplay-Italic.ttff'); }
    .ptser3 {
       font-family: 'Playfair Display-Italic.ttf';
       font-size: 20px;
    }
    
    HTML:
    {
    <div class="col-sm-7 col-xs-12 ptser ptser2 ptser3" style="padding-top: 70px; padding-right: 90px; color: #6a6a6a; text-align:center;">
          <p><strong>Il Primo, riguarda il progetto , indicando anche la mission, il percorso storico, la sua evoluzione.</strong></p>
    
    }
    Ultima modifica di KillerWorm; 16-03-2018 a 18:53 Motivo: tag code

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Si grazie di avermi risposto, però il fatto è che appena richiamo le classi nella sezione(<div>) html, acquisisce l'ultimo per ordine di riga. in questo caso "ptser3".
    Non comprendo la tua perplessità; è corretto che faccia così.
    Tu cosa ti aspetti che succeda?



    [Mod]
    Per il corretto inserimento di codice sul forum, ti invito cortesemente ad usare gli appositi tag di formattazione. Vedi indicazioni nel regolamento di sezione. Grazie.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2018
    Messaggi
    3
    ho risolto , posto la soluzione :
    css:
    @font-face
    {
    font-family: PT Serif;
    src: url('./fonts/PTF56F.ttf');
    }
    @font-face
    {
    font-family: Times New Roman;
    src: url('./fonts/TimesNewRoman.ttf');
    }
    @font-face
    {
    font-family: Georgia;
    src: url('./fonts/Georgia.ttf');
    }


    p.dani {
    font-family:"PT Serif",TimesNewRoman,"Times New Roman",Times,Georgia,serif;
    font-size:20px;
    }

    html:
    <p class="dani">Ciao</p>

    Grazie ancora.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.