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.
Syntaxe
Descripteurs
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-faces'applique.
Syntaxe formelle
@font-face {
[ font-family: <family-name>; ] ||
[ src: [ <uri> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
[ unicode-range: <urange>#; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: normal | <feature-tag-value>#; ] ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <weight>; ] ||
[ font-style: <style>; ]
}où
<family-name> = <string> | <custom-ident>+
<feature-tag-value> = <string> [ <integer> | on | off ]?
Exemples
Police distante
CSS
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
HTML
<p> Et voici Bitstream Vera Serif Bold.</p>
Résultat
Police locale
Ici, 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.
CSS
@font-face {
font-family: MaHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
HTML
<p> Et voici Ma Helvetica.</p>
Résultat
Notes
- Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si les contrôles d'accès HTTP sont paramétrés afin de lever cette restriction.
- Il n'existe pas de types MIME définis pour les formats de police TrueType, OpenType et Web Open File Format (WOFF). Aussi, le type MIME du fichier indiqué n'est pas pris en compte.
@font-facene peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas :.nomClasse { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf; font-weight: bold; } }
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| WOFF File Format 2.0 La définition de 'WOFF2 font format' dans cette spécification. |
Candidat au statut de recommandation | Spécification du format de police avec un nouvel algorithme de compression. |
| WOFF File Format 1.0 La définition de 'WOFF font format' dans cette spécification. |
Recommendation | Spécification du format de police. |
| CSS Fonts Module Level 3 La définition de '@font-face' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 3.5 (1.9.1) | 4.0 | 4.0 | 10.0 | 3.1 |
| WOFF | 3.5 (1.9.1) | 6.0 | 9.0 | 11.10 | 5.1 |
| WOFF2 | 39 (39)[1] | 38 | Pas de support | 24 | Pas de support |
| Polices SVG[2] | Pas de support[3] | (Oui) | Pas de support | (Oui) | (Oui) |
unicode-range |
36 (36) |
(Oui) | 9.0 | (Oui) | (Oui) |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | (Oui) | 1.0 (1.9.1) | ? | Pas de support | 10.0 | (Oui) |
| WOFF | 4.4 | 5.0 (5.0) | 10.0 | Pas de support | 11.0 | 5.0 |
| WOFF2 | Pas de support | 39.0 (39.0)[1] | Pas de support | ? | ? | Pas de support |
| Polices SVG[2] | ? | Pas de support[3] | ? | Pas de support | 10.0 | (Oui) |
unicode-range |
? | 36.0 (36.0) | ? | Pas de support | ? | (Oui) |
[1] Pour les versions de Gecko entre Gecko 35 et Gecko 3, le support de WOFF2 est activé par défaut uniquement pour les versions Nightly et Aurora. Pour utiliser ce format sur les canaux Beta et Release, l'utilisateur doit activer la préférence gfx.downloadable_fonts.woff2.enabled.
[2] La prise en charge des polices SVG a été abandonnée au profit des glyphes SVG contenus dans les paquets de police OpenType.
[3] Le bug bug 119490 avait été saisi afin que Gecko implémente les polices SVG. Étant donné que les polices SVG ont été remplacées par les glyphes SVG au sein des paquets de police OpenType. Le bug a donc été clôturé.
Notes
- La prise en charge du format de police Embedded OpenType n'est pas indiquée dans le tableau de compatibilité car c'est une fonctionnalité propriétaire. Avant IE 9.0, IE ne prenait en charge que ce format.
- TrueType et OpenType ne sont pas inclus dans ce tableau car ils sont remplacées par WOFF.
- La politique de même origine n'est pas implémentée dans les navigateurs basés sur WebKit tels que Safari et Safari Mobile. Cela valait également pour les navigateurs basés sur Blink jusqu'à septembre 2014 (Chrome 37, Opera 24).
Voir aussi
- À propos de WOFF
- Le générateur de règles
@font-facepar Everythingfonts - Le générateur de règles @font-face par FontSquirrel
- Des polices obtenues avec
@font-face(en anglais, sur hacks.mozilla.org) - Une bibliothèque de polices ouvertes (Open Font Library)
- La page de MSDN sur
@font-face - Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)
- Où puis-je utiliser les polices SVG ?