Comment utiliser les polices .woff pour mon site Web?


100

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 'awesome-font' est stockée dans un fichier 'awesome-font.woff'.

Réponses:


168

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 fontssous-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».


Pouvez-vous expliquer le fonctionnement des icônes matérielles? stackoverflow.com/questions/45323577/…
Sunil Garg

16

Vous devez déclarer @font-facecomme ç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;
}

Plus de référence


1
pour la balise src comment utiliser rel = "preload" pour le fichier woff dans ce cas?
Mike
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.