Come utilizzare i caratteri .woff per il mio sito web?

Question

Dove posizionare i font in modo che i CSS possano accedervi?

Sto utilizzando caratteri non standard per il browser in un file .woff. Diciamo che il suo 'carattere fantastico' è memorizzato in un file 'awesome-font.woff'.

Answer 1

Dopo la generazione dei file woff, è necessario definire la famiglia di caratteri, che può essere utilizzata in seguito in tutti gli stili CSS. Di seguito è riportato il codice per definire le famiglie di caratteri (per i caratteri tipografici normale, grassetto, grassetto-corsivo, corsivo). Si presuppone che siano presenti 4 file .woff (per i caratteri tipografici citati), collocati nella sottodirectory fonts.

Nel codice CSS:

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font.woff") format('woff'); 
} 

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font-bold.woff") format('woff'); 
    font-weight: bold; 
} 

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font-boldoblique.woff") format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font-oblique.woff") format('woff'); 
    font-style: italic; 
} 

Dopo aver che le definizioni, si può solo scrivere, ad esempio,

Nel codice HTML:

<div class="mydiv"> 
    <b>this will be written with awesome-font-bold.woff</b> 
    <br/> 
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b> 
    <br/> 
    <i>this will be written with awesome-font-oblique.woff</i> 
    <br/> 
    this will be written with awesome-font.woff 
</div> 

Nel codice CSS:

.mydiv { 
    font-family: myfont 
} 

Il buono strumento per generare file Woff, che può essere incluso nei fogli di stile CSS, è here. Non tutti i file woff funzionano correttamente con le ultime versioni di Firefox e questo generatore produce caratteri "corretti".

Answer 2

è necessario dichiarare @font-face come questo nel foglio di stile

@font-face { 
    font-family: 'Awesome-Font'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff'); 
} 

Ora, se si desidera applicare questo tipo di carattere a un paragrafo è sufficiente utilizzare in questo modo ..

p { 
font-family: 'Awesome-Font', Arial; 
} 

More Reference