Comment utiliser les polices .woff pour mon site Web?

Question

Où placez-vous les polices pour que CSS puisse y accéder?

J'utilise des polices non standard pour le navigateur dans un fichier .woff. Disons que sa "police géniale" est stockée dans un fichier "génial-police.woff".

Answer 1

Après la génération de woff fichiers, vous devez définir la police de caractères de la famille, qui peuvent ensuite être utilisés dans tous vos styles css. Ci-dessous est le code pour définir les familles de polices (normal, gras, gras italique, italique) les polices de caractères. Il est supposé, qu'il y a 4 *.woff fichiers (pour les polices de caractères mentionnés), placée en 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 que des définitions, il vous suffit d'écrire, par exemple,

Dans le 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 pour la génération de woff des fichiers, qui peuvent être inclus dans les feuilles de style CSS se trouve ici. Pas tous les woff fichiers fonctionnent correctement sous les dernières versions de Firefox, et ce générateur produit "correcte" des polices.

Answer 2

Vous devez déclarer @font-face comme ceci 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 voulez appliquer cette police à un paragraphe, utilisez-la simplement comme ça.

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

Plus de référence