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.

Exemple interactif
------------------

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. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration `@font-face` inclut un intervalle `font-weight`.

Syntaxe
-------


```css
/\* 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.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | une transformation |

Syntaxe formelle
----------------
```

font-variation-settings =   
  normal                        |  
  [ <opentype-tag> <number> ]#    
  
<opentype-tag> =   
  <string>    
  
```

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

* Guide sur les polices variables
* v-fonts.com
* axis-praxis.org
Spécifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variation-settings-def |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Guide sur les polices variables
* OpenType Font Variations Overview
* OpenType specification
* OpenType Design-Variation Axis Tag Registry