font-variation-settings

La propriété CSS font-variation-settings permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.

Cette propriété fonctionne à un niveau plus bas que font-feature-settings qui permet de définir les valeurs et les étiquettes (tags) pour les caractéristiques des polices.

Note : Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie font-variant ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.
Note : Les caractéristiques définies avec font-variation-settings l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. font-weight), où qu'elles soient dans la cascade.

Syntaxe

/* Valeur pour les réglages par défaut */
font-variation-settings: normal;

/* Utilisation des valeurs */
/* pour les axes OpenType  */
font-variation-settings: "XHGT" 0.7;

/* Valeurs globales */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

La valeur de cette propriété peut être définie selon deux formes :

  • Avec le mot-clé normal
  • Ou avec une chaîne de caractères (<string>) suivi d'un nombre (<number>). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.

Valeurs

normal
Le texte est disposé avec les caractéristiques par défaut.
<string> <number>
Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (type <string>) avec quatre caractères ASCII, suivie par un nombre (type number) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <string> a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique <number> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.

Syntaxe formelle

normal | [ <string> <number> ]#

Axes enregistrés et axes spécifiques

Les axes des polices variables sont rangés selon deux catégories : les axes enregistrés et les axes spécifiques.

Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.

Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :

Étiquette pour l'axe Propriété
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz"

font-optical-sizing

Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.

Note : Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.

Exemples

Attention ! Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.

Graisse (wght)

L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.

Pente (slnt)

L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.

Autres exemples

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.

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationune transformation
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 62Edge Support complet 17Firefox Support complet 62
Support complet 62
Aucun support 53 — 62
Désactivée
Désactivée From version 53 until version 62 (exclusive): 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 Support complet 11
Notes
Support complet 11
Notes
Notes Requires macOS 10.13 High Sierra or later.
WebView Android Support complet 62Chrome Android Support complet 62Edge Mobile Support complet 17Firefox Android Support complet 62
Support complet 62
Aucun support 53 — 62
Désactivée
Désactivée From version 53 until version 62 (exclusive): 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 49Safari iOS Support complet 11
Notes
Support complet 11
Notes
Notes Requires iOS 11 or later.
Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
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é.

Voir aussi

Étiquettes et contributeurs liés au document

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