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-fractionsnormalfont-variant-numeric passe d'une valeur à l'autre sans transition.Schéma syntaxique de font-variant-numeric.
font-variant-numericLes liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG
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
ordinalpeut ê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
ordinalcorrespond à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-zerocorrespond à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-numscorrespond à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-numscorrespond àfont-feature-settings:'onum'.
- font-variant-numeric: proportional-nums;
La largeur de chacun des chiffres est ajustée en fonction de sa forme (le
1est 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-numscorrespond à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-numscorrespond à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-fractionscorrespond à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-fractionscorrespond àfont-feature-settings:'frac'.
Valeurs standards acceptées par toutes les propriétés:
font-variant-numeric: initial (normal)
font-variant-numeric: inherit
font-variant-numeric: revert
font-variant-numeric: revertLayer
font-variant-numeric: unset
Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.
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.
Manipulation de la propriété font-variant-numeric avec Javascript.
Changement de la valeur de font-variant-numeric avec Javascript.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['font-variant-numeric'] = 'lining-nums';
// ou
let el = document.getElementById('id');
el.style.fontVariantNumeric = 'lining-nums';
Récupération de la valeur de font-variant-numeric avec Javascript.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['font-variant-numeric'];
// ou
let el = document.getElementById('id');
let value = el.style.fontVariantNumeric;
Récupération de la valeur calculée de font-variant-numeric.
La valeur calculée est celle qui résulte de la cascade des héritages. A défaut, la valeur calculée est la valeur initiale de la propriété (normal
dans le cas de font-variant-numeric).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('font-variant-numeric');
Changement de la valeur de font-variant-numeric avec JQuery.
$('#id').css('font-variant-numeric', 'lining-nums');
// ou
$('#id').css('fontVariantNumeric', 'lining-nums');
Récupération de la valeur calculée de font-variant-numeric avec JQuery.
let value = $('#id').css('font-variant-numeric');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété font-variant-numeric et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de font-variant-numeric.
Dans le cas de font-variant-numeric, la valeur calculée est la même que la valeur saisie car cette propriété n'accepte que des valeurs prédéfinies.
Simulateur avec la propriété font-variant-numeric.
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
monospaceaffiche des zéros barrés quelque soit la valeur defont-variant-numeric. Le traitement de la valeurordinalsemble 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-numericNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété font-variant-numeric.
-
Module CSS - Polices de caractères - Niveau 3
Première définition de la propriétéfont-variant-numeric.
21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.
14 Août 2018Proposé à la recommandation.
20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Pas de changement concernant la propriétéfont-variant-numeric.11 Juillet 2017Document de travail. -
Module CSS - Polices de caractères - Niveau 5
29 Juin 2021Document de travail.
Voir aussi, au sujet des polices de caractères.
La spécification CSS Fonts Module regroupe tout ce qui concerne les polices de caractères, la typographie, l'exploitation des possibilités des formats de polices modernes, le téléchargement de polices, etc.
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.