@font-face

Résumé

La règle @ CSS @font-face permet à l'auteur de spécifier des polices en ligne afin d'afficher le texte sur leur pages web. En permettant aux auteurs d'utiliser leurs propres polices, @font-face élimine la nécessité de dépendre du nombre limité de polices que l'utilisateur a installé sur son ordinateur. La règle @font-face peut être utilisée non seulement au plus haut niveau d'une feuille de style, mais aussi dans n'importe quel règle @ de groupe conditionnel.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Syntaxe

@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>];
}

Valeurs

<family-name>
Spécifie le nom d'une police de caractères qui sera utilisée comme une valeur font-face pour les propriétés des polices.
<uri>
URL pour la localisation du fichier de police de caractères distant, ou le nom d'une police de caractère sur l'ordinateur de l'utilisateur dans la forme local("Nom de la police").
<font-variant>
Une valeur de font-variant.
<font-stretch>
Une valeur de font-stretch.
<weight>
Une valeur de graisse de la police de caractère.
<style>
Une valeur d'aspect de la police de caractère.

Vous pouvez définir une police de caractère sur l'ordinateur de l'utilisateur en utilisant la syntaxe local(). So cette police n'est pas trouvée, d'autres sources seront essayées jusqu'à ce qu'une d'elle donne un résultat.

Exemples

Cet exemple définit simplement une police à télécharger qui doit être utilisée, l'applique sur le corps entier du document.

Voir l'exemple en direct

<html>
<head>
  <title>Exemple de polices de caractère Web</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  Ceci est Bitstream Vera Serif Bold.
</body>
</html>

Dans cet exemple, une copie locale de "Helvetica Neue Bold" est utilisée. Si l'utilisateur n'a pas installé cette police de caractères (deux noms différents sont essayés), alors la police de caractères téléchargeable "MgOpenModernaBold.ttf" est utilisée :

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

Notes

Dans Gecko les polices de caractère en ligne sont sujettes à la restriction de domaine identique (les fichiers de la police de caractères doivent être sur le même domaine que la page les utilisant), sauf si des contrôles d'accès HTTP sont utilisés pour lever cette restriction.

Note : puisqu'il n'existe pas de type MIME définis pour les polices de caractères TrueType, OpenType et Web Open File Format (WOFF), le type MIME du fichier spécifié n'est pas considéré.

Lorsque Gecko affiche une page qui utilise une police de caractères web, il affiche d'abord le texte en utilisant la meilleure police de remplacement disponible sur l'ordinateur de l'utilisateur en attendant le téléchargement de la police de caractère web. Lorsque toutes les polices sont téléchargées, Gecko met à jour le texte qui utilise ces polices. Ceci permet à l'utilisateur de lire la page plus rapidement.

Spécifications

Spécification Statut Commentaire
WOFF File Format 1.0 Recommendation Spécification du format de police
CSS Fonts Module Level 3 Candidate Recommendation  

Compatibilité des navigateurs

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base 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
Polices SVG Pas de support
Non implémenté (voir bug 119490)
(Oui) Pas de support (Oui) (Oui)
unicode-range

Pas de support

(Oui) 9.0 (Oui) (Oui)
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Support de base (Oui) 1.0 (1.9.1) ? Pas de support 10.0 (Oui)
WOFF ? 5.0 (5.0) ? Pas de support 11.0 Pas de support
Polices SVG ? Pas de support
Non implémenté (voir bug 119490)
? Pas de support 10.0 (Oui)
unicode-range ? Pas de support ? Pas de support ? (Oui)

Notes

  • Le support du format de police de caractères Embedded OpenType n'est pas inclut dans le tableau de compatibilité car c'est une fonction propriétaire. Avant IE 9.0, IE ne supportait que ce format.
  • TrueType et OpenType ne sont pas inclut car ils sont remplacés par WOFF.

Voir également

MDN

Externe

Pièces jointes

Fichier Taille Date Joint par
VeraSeBd.ttf
58736 octets 2008-10-13 20:44:48 Sheppy
webfont-sample.html
394 octets 2009-05-18 15:58:36 Sheppy
sample1.html
2028 octets 2011-12-09 16:41:17 arnaudbrousseau
SVGDXR.png
97470 octets 2010-01-07 18:52:45 andydude

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : naar, Fredchat, Valacar, Huchezal, Jürgen Jeka, PifyZ, SebMouren, BenoitL, FredB
Dernière mise à jour par : PifyZ,
Masquer la barre latérale