80 votes

Comment utiliser les polices .woff pour mon site Web?

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".

137voto

bhovhannes Points 1349

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.

15voto

Mr. Alien Points 60232

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: