font-variant-numeric
====================

La propriété CSS **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.

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

Syntaxe
-------


```css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions;

/\* Valeurs globales \*/
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: unset;
```


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

* la première avec le mot-clé `normal`
* la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.
### Valeurs

`normal`

Ce mot-clé désactive l'utilisation des glyphes alternatifs.

`ordinal`

Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1er, 2e, 3e, etc. Il correspond aux valeurs OpenType values `ordn`.

`slashed-zero`

Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs OpenType `zero`.

`<numeric-figure-values>`

Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées :

* `lining-nums` permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType `lnum`.
* `oldstyle-nums` permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType `onum`.

`<numeric-spacing-values>`

Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valeurs :

* `proportional-nums` permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType `pnum`.
* `tabular-nums` permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType `tnum`.

`<numeric-fraction-values>`

Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions :

* `diagonal-fractions` permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType `frac`.
* `stacked-fractions` permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType `afrc`.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | all elements and text. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

font-variant-numeric =   
  normal                                              |  
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]    
  
<numeric-figure-values> =   
  lining-nums    |  
  oldstyle-nums    
  
<numeric-spacing-values> =   
  proportional-nums  |  
  tabular-nums         
  
<numeric-fraction-values> =   
  diagonal-fractions  |  
  stacked-fractions     
  
```

Exemples
--------

Spécifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-numeric-prop |

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

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

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

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant`