font-variant-numeric - Propriété CSS
Résumé des caractéristiques de la propriété font-variant-numeric
normal
| ordinal
| slashed-zero
| lining-nums
| oldstyle-nums
| proportional-nums
| tabular-nums
| diagonal-fractions
| stacked-fractions
normal
font-variant-numeric
passe d'une valeur à l'autre sans transition.Description de la propriété font-variant-numeric
.
font-variant-numeric
définit les paramètres d'affichage évolués pour les nombres, comme par exemple
la présentation des fractions, des numéros d'ordre, etc.
Cette propriété fonctionne uniquement avec certaines polices OTF.
Pour une présentation plus complète des possibilités offertes par les polices OTF
et de leur utilisation avec une syntaxe de bas niveau, reportez-vous à la propriété font-feature-settings
.
Consultez également la propriété raccourcie font-variant
.
Syntaxes pour font-variant-numeric
.
La police de caractères utilisée pour les exemples est Comic Jens
diffusée en
Creative Common
(copyright Jens Kutilek).
Les exemples utilisés pour illustrer les syntaxes sont des simulations afin d'être lisibles même sur les navigateurs qui ne traitent pas
font-variant-numeric
, et d'autre part, parce qu'il est difficile de trouver des polices qui offrent toutes ces possibilités.
- font-variant-numeric: normal;
Valeur par défaut. les chiffres sont affichés avec leur glyphe standard, sans mise en forme particulière.
- font-variant-numeric: ordinal;
Les numéros d'ordre, tels que 1a, 2a, mais aussi les symboles No, no, etc. sont remplacés par les caractères 1a, 2a, No, no, etc.
On peut obtenir un effet comparable avec la balise HTML sup mais il est nécessaire d'appliquer cette balise précisément sur la partie du nombre qui doit être en exposant, tandis que la valeur
ordinal
peut être appliquée sur l'ensemble du texte, la détection des caractères à mettre en exposant est automatique.Les caractères ordinaux français (1er, 2ème, etc.) ne sont traités par aucune police à notre connaissance.
La valeur
ordinal
correspond àfont-feature-settings:'ordn'
. - font-variant-numeric: slashed-zero;
Les zéros sont barrés (
Ø
). C'est utile lorsqu'il faut éviter toute confusion entre le chiffre 0 et la lettre O.Cette fonctionnalité n'est pas si couramment reconnue, mais il existe plusieurs autres méthodes pour obtenir un zéro barré :
- Utiliser le caractère zéro de la police générique
monospace
: 0. - Utiliser le caractère dont le code hexadécimal est
D8
(216 en décimal) : Ø. - Utiliser l'entité html
Ø
: Ø.
La valeur
slashed-zero
correspond àfont-feature-settings:'zero'
. - Utiliser le caractère zéro de la police générique
- font-variant-numeric: lining-nums;
Les chiffres ont tous la même hauteur et sont tous positionnés sur la même ligne de base. Cette valeur est le contraire de
oldstyle-nums
.La valeur
lining-nums
correspond àfont-feature-settings:'lnum'
. - font-variant-numeric: oldstyle-nums;
Les chiffres sont positionnés à des hauteurs différentes sur la ligne, t peuvent également avoir des hauteur différentes. ce qui donne un effet un peu rétro. Cette valeur est le contraire de
lining-nums
.La valeur
oldstyle-nums
correspond àfont-feature-settings:'onum'
. - font-variant-numeric: proportional-nums;
La largeur de chacun des chiffres est ajustée en fonction de sa forme (le
1
est plus étroit que le8
). L'esthétique du texte est améliorée mais les nombres présentés en colonne ne sont pas alignés verticalement. Cette valeur est le contraire detabular-nums
.La valeur
proportional-nums
correspond àfont-feature-settings:'pnum'
. - font-variant-numeric: tabular-nums;
La largeur de chacun des chiffres est identique. Cette option est intéressante lorsque les nombres sont présentés en colonne et que l'on souhaite un alignement vertical des chiffres. Cette valeur est le contraire de
proportional-nums
.La valeur
tabular-nums
correspond àfont-feature-settings:'tnum'
. - font-variant-numeric: stacked-fractions;
Deux nombres séparés par un slash (
/
) sont affichés sous la forme d'une fraction, avec un trait horizontal. Cette valeur est incompatible avecdiagonal-fractions
.La valeur
stacked-fractions
correspond àfont-feature-settings:'afrc'
. - font-variant-numeric: diagonal-fractions;
Deux nombres séparés par un caractère slash (
/
) sont affichés sous la forme d'une fraction, avec un trait oblique entre les deux. Cette valeur est incompatible avecstacked-fractions
.La valeur
diagonal-fractions
correspond àfont-feature-settings:'frac'
. - font-variant-numeric:
initial
; font-variant-numeric:inherit
; font-variant-numeric:revert
; font-variant-numeric:revert-layer
; font-variant-numeric:unset
;La valeur initiale est :
.normal
Animation de la propriété font-variant-numeric
.
L'exemple ci-dessous montre que l'animation de font-variant-numeric
est possible, même si son intérêt est limité.
Remarque : la propriété font-variant-numeric
est appliquée sur les mots No
et 2eme
.
L'appliquer sur toute la phrase donne un résultat farfelu.
D'autre part, nous avons dû écrire 2eme
sans accent, car l'accent perturbe le fonctionnement.
Simulateur.
Le simulateur ci-dessous permet de tester les différentes valeurs pour la propriété font-variant-numeric
avec
plusieurs polices. On voit que le résultat est très dépendant de la police :
- La police
monospace
affiche des zéros barrés quelque soit la valeur defont-variant-numeric
. Le traitement de la valeurordinal
semble correct sur cet exemple très simple, mais il convient de l'appliquer de façon très spécifique mot par mot. - Le traitement des fractions est différent d'une police à l'autre.
Police | Ordinal | zéros barrés | old-style | Tabulaire | fractions |
---|---|---|---|---|---|
serif | OK | OK | OK | ||
sans-serif | OK | OK | OK | ||
monospace | OK | OK | |||
cursive | OK | OK | |||
Dancing Script | OK | ||||
Fira Sans | OK | OK |
1200 458 1114
8540 710 8437
3/4 240/1000 7/22
Prise en charge et compatibilité des navigateurs.
La propriété font-variant-numeric
apporte de nouvelles possibilités d'affichage
des nombres. La prise en charge est maintenant correcte sur la plupart des navigateurs.
font-variant-numeric
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que font-variant-numeric
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-variant-numeric
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.