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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 62Edge Aucun support NonFirefox Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée 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.
IE Aucun support NonOpera Support complet 49Safari Aucun support NonWebView Android Support complet 62Chrome Android Support complet 62Edge Mobile Aucun support NonFirefox Android Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée 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.
Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

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