mozilla
Vos résultats de recherche

    @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(). Si 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
    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  

    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

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Dernière mise à jour par : Qu3tzalify,