Faire son site 11 : Référence CSS - @font-face

@font-face

La règle @font-face permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs. La règle @font-face peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à une règle @ conditionnelle.

Les descripteurs liés à cette règle sont :

font-family Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.

src Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.

font-variant Une valeur font-variant.

font-stretch Une valeur font-stretch.

font-weight Une valeur font-weight.

font-style Une valeur font-style.

unicode-range L'intervalle des points de code Unicode pour lesquels la règle @font-face s'applique.

Dans l'exemple l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.


<style>
@font-face {
  font-family: MaHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
</style>


La règle @font-face ne peut pas être déclarée au sein d'un sélecteur CSS.