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

Dove metti i caratteri in modo che i CSS possano accedervi?

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

Dopo la generazione dei file woff, devi definire la famiglia di caratteri, che può essere utilizzata successivamente in tutti i tuoi stili CSS. Di seguito è riportato il codice per definire le famiglie di caratteri (per i caratteri tipografici normali, grassetto, grassetto corsivo, corsivo). Si presume che ci siano 4 file * .woff (per i caratteri tipografici menzionati), inseriti nella fontssottodirectory.

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 ottenuto queste definizioni, puoi semplicemente 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 buon strumento per la generazione di file woff, che possono essere inclusi nei fogli di stile CSS, si trova qui . Non tutti i file woff funzionano correttamente con le ultime versioni di Firefox e questo generatore produce caratteri "corretti".

Devi dichiarare in @font-facequesto modo nel tuo 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 vuoi applicare questo carattere a un paragrafo, usalo semplicemente in questo modo.

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

Più riferimento