font-variation-settings

Le descripteur font-variation-settings, associé à la règle @ @font-face permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.

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

Syntaxe

/* On utilise les paramètres par défaut */
font-variation-settings: normal;

/* On indique les valeurs pour les noms des axes OpenType */
font-variation-settings: "xhgt" 0.7;

Valeurs

normal
Le texte est disposé avec les paramètres par défaut.
<string> <number>
Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom (<string>) de 4 caractères ASCII, suivis d'un nombre (number) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.

Syntaxe formelle

normal | [ <string> <number>] #

Exemples

@font-face {
  font-family: 'OpenTypeFont';
  src: url('open_type_font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'wght' 400, 'wdth' 300; 
}

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'font-variation-settings' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Non601 Non Oui Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Non601 Oui Non Oui

1. From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Étiquettes et contributeurs liés au document

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