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 :

CSS - Propriété font-variant-numeric

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.

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

    La valeur slashed-zero correspond à font-feature-settings:'zero'.

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

    Les chiffres sont tous positionnés à la même hauteur. 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, 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;

    La valeur initiale est normal.

  • font-variant-numeric: unset; font-variant-numeric: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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. Mais la prise en charge est encore largement incomplète pour la plupart des navigateurs (2020).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-family : Définit le nom de la police de caractères.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-ligatures : Active ou désactive la ligature des caractères.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
  • @font-feature-values : Définit les variantes typographiques à utiliser.