Le descripteur src, associé à la règle @ @font-face, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle @font-face soit considérée comme valide.

Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.

Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle @font-face. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle @font-face donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.

En lien avec les règles @@font-face
Valeur initialen/a (required)
Médiatous
Valeur calculéecomme spécifié
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

/* <url> */
src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */
src: url(chemin/vers/police.woff);                       /* URL relative */
src: url(chemin/vers/police.woff) format("woff");        /* format explicite */
src: url('chemin/vers/police.woff');                     /* URL entre quotes */
src: url(chemin/vers/policesvg.svg#exemple);             /* fragment identifiant une police */

/* Valeurs de type <font-face-name> */
src: local(police);      /* nom sans double quote */
src: local(une police); /* nom avec espace */
src: local("police");    /* nom entre double quotes */

/* Liste avec plusieurs éléments */
src: local(police), url(chemin/vers/police.svg) format("svg"),
    url(chemin/vers/police.woff) format("woff"),
    url(chemin/vers/police.otf) format("opentype");

Valeurs

<url> [ format( <string># ) ]?
Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.
<font-face-name>
Définit le nom d'une police installée localement grâce à la fonction local() qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.

Syntaxe formelle

[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#


<family-name> = <string> | <custom-ident>+

Exemples

@font-face {
  font-family: policeexemple;
  src: local(Police Exemple), url('policeexemple.woff') format("woff"),
      url('policeexemple.otf') format("opentype");
}

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 3
La définition de 'src' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 6Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 2.2Chrome Android ? Edge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 12Safari iOS Support complet 3.1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,