web-dev-qa-db-fra.com

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

htmlcssfontswoff
81
Don P

Après la génération des fichiers woff, vous devez définir une famille de polices pouvant être utilisée ultérieurement dans tous vos styles CSS. Vous trouverez ci-dessous le code permettant de définir les familles de polices (pour les polices de caractères normales, gras, gras-italique, italique). Il est supposé qu'il existe 4 fichiers * .woff (pour les polices mentionnées) placés dans le sous-répertoire fonts.

En 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 eu 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>

En code CSS:

.mydiv {
    font-family: myfont
}

Le bon outil pour générer des fichiers woff, qui peuvent être inclus dans des feuilles de style CSS, se trouve ici . Tous les fichiers woff ne fonctionnent pas correctement dans les dernières versions de Firefox, et ce générateur produit des polices "correctes".

142
bhovhannes

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 voulez appliquer cette police à un paragraphe, utilisez-la simplement comme ça.

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

Plus de références

16
Mr. Alien