Réponses:
Après la génération des fichiers woff, vous devez définir la famille de polices, qui peut être utilisée plus tard dans tous vos styles css. Vous trouverez ci-dessous le code pour définir les familles de polices (pour les polices normales, gras, gras-italique, italique). Il est supposé qu'il existe 4 fichiers * .woff (pour les polices de caractères mentionnées), placés dans le fonts
sous-répertoire.
Dans le code 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;
}
Après avoir obtenu ces définitions, vous pouvez simplement écrire, par exemple,
En code 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>
Dans le code CSS:
.mydiv {
font-family: myfont
}
Le bon outil de génération de fichiers woff, qui peuvent être inclus dans les feuilles de style CSS se trouve ici . Tous les fichiers woff ne fonctionnent pas correctement sous les dernières versions de Firefox, et ce générateur produit des polices «correctes».
Vous devez déclarer @font-face
comme ça dans votre feuille de style
@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');
}
Maintenant, si vous souhaitez appliquer cette police à un paragraphe, utilisez-la simplement comme ceci.
p {
font-family: 'Awesome-Font', Arial;
}