Propriété CSS font-variant-numeric

La propriété CSS font-variant-numeric contrôle l'utilisation de glyphes alternatifs pour les chiffres, les fractions et les marqueurs ordinaux. Elle fait partie de la famille font-variant et expose les fonctionnalités numériques OpenType sans avoir recours à la propriété de bas niveau font-feature-settings.

Cette page présente ce que fait chaque valeur, quand l'utiliser, les pièges liés à la prise en charge des polices, ainsi qu'un exemple exécutable.

Pourquoi l'utiliser

Les chiffres peuvent être rendus dans plusieurs styles : ordinaux (ex. 1^er), fractions (ex. ½), chiffres alignés ou de style ancien, et espacement proportionnel ou tabulaire. Contrairement aux lettres, ces variantes ne modifient pas le sens du texte, mais elles apportent du contexte et influencent la lisibilité :

Les chiffres tabulaires donnent à chaque chiffre la même largeur afin que les nombres s'alignent dans les tableaux et les colonnes de prix.
Les chiffres de style ancien possèdent des hampes et des jambages qui s'intègrent naturellement dans le texte courant plutôt que de se démarquer comme un titre.
Le zéro barré distingue 0 de la lettre O dans le code, les identifiants et les numéros de série.
Les fractions diagonales transforment 1/2 en un seul glyphe typographique ½.

La principale limitation est la prise en charge par les polices : la fonctionnalité ne fonctionne que si la police embarque réellement la table OpenType correspondante. La plupart des polices système prennent en charge quelques fonctionnalités (alignées, tabulaires), mais diagonal-fractions, stacked-fractions et slashed-zero sont présentes dans beaucoup moins de polices. Lorsqu'une police ne dispose pas d'une fonctionnalité, la valeur est silencieusement ignorée et les glyphes par défaut sont affichés.

Valeur initiale	normal
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animable	Discret.
Version	CSS3
Syntaxe DOM	object.style.fontVariantNumeric = "slashed-zero";

Syntaxe

font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];

Les valeurs de style de chiffre, d'espacement, de fraction, ordinales et de zéro barré peuvent être combinées dans une seule déclaration car elles contrôlent des aspects indépendants des glyphes :

/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;

Exemple

Exemple de la propriété CSS font-variant-numeric avec les valeurs oldstyle-nums et diagonal-fractions

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .p1 {
        font-variant-numeric: oldstyle-nums;
      }
      .p2 {
        font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-numeric property example</h2>
    <p class="p1">001528931</p>
    <p class="p2">1/2</p>
  </body>
</html>

Essayez vous-même »

Résultat

Comparaison de plusieurs fonctionnalités

Cet exemple applique chaque fonctionnalité numérique sur son propre paragraphe afin que vous puissiez les comparer côte à côte (avec une police qui les prend en charge, comme de nombreuses polices Google Fonts).

<!DOCTYPE html>
<html>
  <head>
    <title>font-variant-numeric features</title>
    <style>
      .lining   { font-variant-numeric: lining-nums; }
      .oldstyle { font-variant-numeric: oldstyle-nums; }
      .tabular  { font-variant-numeric: tabular-nums; }
      .diagonal { font-variant-numeric: diagonal-fractions; }
      .slashed  { font-variant-numeric: slashed-zero; }
    </style>
  </head>
  <body>
    <p class="lining">lining-nums: 0123456789</p>
    <p class="oldstyle">oldstyle-nums: 0123456789</p>
    <p class="tabular">tabular-nums: 1111 vs 8888</p>
    <p class="diagonal">diagonal-fractions: 1/2 3/4</p>
    <p class="slashed">slashed-zero: 1000 2030</p>
  </body>
</html>

Valeurs

Valeur	Description
normal	Les glyphes alternatifs ne sont pas activés.
`<numeric-figure-values>`	Contrôle le style des chiffres. Mots-clés : `lining-nums`, `oldstyle-nums`.
`<numeric-spacing-values>`	Contrôle la largeur d'espacement. Mots-clés : `proportional-nums`, `tabular-nums`.
`<numeric-fraction-values>`	Contrôle le style des fractions. Mots-clés : `diagonal-fractions`, `stacked-fractions`.
ordinal	Remplace les chiffres par des glyphes ordinaux en exposant (ex. ¹ˢᵗ, ²ⁿᵈ) au lieu d'ajouter du texte comme "st" ou "nd". Correspond à l'option OpenType `ordn`.
slashed-zero	Force un zéro avec une barre oblique. Correspond à l'option OpenType `zero`.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriétés associées

font-variant-numeric est l'une des formes longues du raccourci font-variant. Les autres ciblent différentes catégories de glyphes :

font-variant-caps — petites capitales, petites capitales réduites et glyphes de titrage.
font-variant-ligatures — ligatures communes, discrétionnaires et contextuelles.

Elle est prise en charge à partir de CSS3.

Exercice

Pratique

Que fait la propriété CSS font-variant-numeric ?

Elle est utilisée pour changer la couleur de la policeElle permet aux caractères provenant de différents scripts de mieux se mélangerElle permet de contrôler l'utilisation de glyphes alternatifs pour les chiffres, les fractions et les marqueurs ordinauxElle est utilisée pour définir la taille de la policeElle encourage l'utilisation de styles particuliers dans une police de caractères