Propriété CSS font-variant-numeric

La propriété font-variant-numeric prend en charge le format de police OpenType en permettant de contrôler l'utilisation de glyphes alternatifs pour les chiffres, les fractions et les indicateurs d'ordinal.

Les chiffres peuvent avoir des variantes telles que les ordinaux (par ex. 1er), les fractions (par ex. 1/2). Contrairement aux lettres, ils ne modifient pas le sens du contenu, mais ces variations ajoutent du contexte et peuvent influencer la lisibilité.

La principale limitation est que seuls un nombre limité de polices prennent entièrement en charge font-variant-numeric et font-variant. Il existe un grand nombre de polices compatibles OpenType, mais peu d'entre elles utilisent toutes les fonctionnalités de font-variant-numeric.

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

Syntaxe

Syntaxe de la propriété CSS font-variant-numeric

css

font-variant-numeric: normal | &lt;numeric-figure-values&gt; | &lt;numeric-spacing-values&gt; | &lt;numeric-fraction-values&gt; | ordinal | slashed-zero;

Exemple de la propriété font-variant-numeric :

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

html

<!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>

Try it Yourself »

Résultat

CSS font-variant-numeric Property

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 d'ordinal en exposant (par ex., ¹ˢᵗ, ²ⁿᵈ) au lieu d'ajouter du texte comme "st" ou "nd". Correspond à `ordn` dans OpenType.
slashed-zero	Force un zéro barré. Correspond à `zero` dans OpenType.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

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érentes écritures de mieux se mélangerElle permet de contrôler l'utilisation de glyphes alternatifs pour les chiffres, les fractions et les indicateurs d'ordinalElle est utilisée pour définir la taille de la policeElle encourage l'utilisation de styles particuliers dans une police de caractères

Propriété CSS font-variant-numeric ​

Syntaxe ​

Exemple de la propriété font-variant-numeric : ​

Résultat ​