Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

font-variant-numeric - Propriété CSS

font-variant-numeric

Résumé des caractéristiques de la propriété font-variant-numeric

Description rapide
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Type d'animation
Discrète : lors d'une animation, la propriété font-variant-numeric passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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.

Syntaxe de font-variant-numericSchéma syntaxique de la propriété CSS font-variant-numeric normal normal lining-nums lining-nums oldstyle-nums oldstyle-nums proportional-nums proportional-nums tabular-nums tabular-nums diagonal-fractions diagonal-fractions stacked-fractions stacked-fractions ordinal ordinal slashed-zero slashed-zerofont-variant-numeric:;font-variant-numeric:;Télécharger l'image en SVG

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 normal pour font-variant-numeric

    Valeur par défaut. les chiffres sont affichés avec leur glyphe standard, sans mise en forme particulière.

  • font-variant-numeric: ordinal;
    Valeur ordinal pour font-variant-numeric

    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;
    Valeur slashed-zero pour font-variant-numeric

    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'.

  • font-variant-numeric: lining-nums;
    Valeur lining-nums pour font-variant-numeric

    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;
    Valeur oldstyle-nums pour font-variant-numeric

    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;
    Valeur proportional-nums pour font-variant-numeric

    La largeur de chacun des chiffres est ajustée en fonction de sa forme (le 1 est plus étroit que le 8). 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 de tabular-nums.

    La valeur proportional-nums correspond à font-feature-settings:'pnum'.

  • font-variant-numeric: tabular-nums;
    Valeur tabular-nums pour font-variant-numeric

    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;
    Valeur stacked-fractions pour Font-variant-numeric

    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 avec diagonal-fractions.

    La valeur stacked-fractions correspond à font-feature-settings:'afrc'.

  • font-variant-numeric: diagonal-fractions;
    Valeur diagonal-fractions pour Font-variant-numeric

    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 avec stacked-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.

Le dossard No28 est arrivé 2eme

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 de font-variant-numeric. Le traitement de la valeur ordinal 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.
PoliceOrdinalzéros
barrés
old-styleTabulairefractions
serif OKOKOK
sans-serif OKOKOK
monospace OK OK
cursive OKOK
Dancing Script OK
Fira Sans OKOK

Police :

font-variant-numeric :

1er   1st   2ème   No   no   9a
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.

1
font-variant-numeric
Estimation de la prise en charge en pourcentage du parc actuel.
96%

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.

Propriétés.

Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Ajustement du crénage entre caractères.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Sélectionne les styles italique ou oblique de la police de caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Applique une capitalisation des caractères.
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Mise en exposant ou en indice des caractères.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit les variantes typographiques à utiliser.
Définit une palette de couleurs appliable ensuite à une police de caractères.