La propriété font-variant-numeric
permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
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: 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 OpenTypelnum
.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 OpenTypeonum
.
- <numeric-spacing-values>
- Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs :
proportional-nums
permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenTypepnum
.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 OpenTypetnum
.
- <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 OpenTypefrac
.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 OpenTypeafrc
.
Syntaxe formelle
normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]où
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
Exemples
CSS
/* Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 : http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web */ @font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "Source Sans Pro"; }
HTML
<p class="ordinal">Premier, deuxième, troisième, quatrième, cinquième</p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Fonts Module Level 3 La définition de 'font-variant-numeric' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | normal |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Compatibilité des navigateurs
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet 52 | Edge Aucun support Non | Firefox
Support complet
34
| IE Aucun support Non | Opera Support complet 39 | Safari Support complet 9.1 | WebView Android Support complet 52 | Chrome Android Support complet 52 | Edge Mobile Aucun support Non | Firefox Android
Support complet
34
| Opera Android Support complet 39 | Safari iOS Support complet Oui | Samsung Internet Android Support complet 6.0 |
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é.