La font-variant-numericpropriété en CSS prend en charge le format de police OpenType en spécifiant les glyphes numériques à utiliser sur une classe, y compris les variations pour les fractions, les marqueurs ordinaux et les variations de style, entre autres.
Un peu de contexte
Nous avons tendance à considérer les nombres comme un glyphe statique. Il imprime et c'est comme ça. Cependant, les nombres ressemblent beaucoup plus à des lettres de l'alphabet dans le sens où ils peuvent avoir des variantes qui, selon le contexte, valent la peine de modifier le style. Nous parlons de choses comme les fractions (par exemple 1/4), les ordinaux (par exemple 1er) et même l'équivalent des chiffres majuscules et minuscules. Cependant, contrairement aux lettres, ces variations ne changent pas la signification du contenu, bien qu'elles apportent un contexte supplémentaire ou ont un impact sur la lisibilité.
Le hic avec cette propriété est qu'elle a été conçue pour fonctionner avec des polices compatibles OpenType, un nouveau format de police en développement rapide qui fournit un ensemble plus complet de glyphes pouvant être ciblés pour une utilisation dans différents contextes. Vous pouvez souvent entendre OpenType appelé polices variables, car elles contiennent une plus grande variété de caractères qui les rendent plus flexibles pour une variété d'utilisations. Des variations pour toutes les choses!
Le problème est que la disponibilité de polices capables de tirer pleinement parti de font-variantet font-variant-numericest limitée. Il existe un nombre croissant de polices compatibles OpenType, mais il existe un sous-ensemble beaucoup plus restreint d'options qui utilisent toutes les fonctionnalités font-variant-numericproposées et celles-ci sont souvent premium et coûteuses. Richard Butler résume bien cela:
Nous avons à notre disposition des nombres «majuscules» appelés chiffres de doublure ou de titrage, et des chiffres «minuscules» appelés chiffres de style ancien ou de texte.… Il est également vrai que la grande majorité des polices ne sont ni modernes ni professionnelles, si moderne signifie OpenType- des moyens activés et professionnels conçus avec les deux ensembles de chiffres.
Le plus gros problème qui nous préoccupe généralement en ce qui concerne les propriétés CSS est la prise en charge du navigateur, mais cette propriété et toutes les autres font-variantsont également à la merci des concepteurs de polices pour apporter un support complet à la table.
C'est dommage, mais nous commençons à voir apparaître des polices plus «modernes» et «professionnelles», même au moment d'écrire ces lignes. Adobe TypeKit a annoncé son travail pour prendre en charge les fonctionnalités OpenType et il a été dit que Google Fonts est également intégré maintenant que Chrome 62 les prend en charge.
Utilisation de base
Voici l'utilisation la plus basique de la propriété:
.fraction ( font-variant-numeric: diagonal-fractions; )Les navigateurs plus anciens ne le reconnaîtront pas, mais ils acceptent font-feature-settingsce qui déverrouille les mêmes fonctionnalités avec des valeurs différentes. Nous pouvons associer les deux propriétés pour une prise en charge plus approfondie:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Ou, nous pouvons personnaliser cela pour détecter la prise en charge du navigateur @supportsafin que la nouvelle propriété ne soit servie qu'aux navigateurs compatibles:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Valeurs
La font-variant-numericpropriété accepte les valeurs suivantes. La font-feature-settingsvaleur correspondante est notée pour référence.
Valeurs générales
| Évaluer | Description | Réglage des fonctionnalités |
|---|---|---|
normal | Aucune des fonctionnalités répertoriées ci-dessous n'est activée. | N / A |
ordinal | Applique des lettres pour représenter l'ordre numérique, généralement sous la forme d'un exposant. | ordn |
slashed-zero | Affiche une autre forme de zéro avec une ligne diagonale qui la traverse. | zero |
Valeurs des chiffres numériques
| Évaluer | Description | Réglage des fonctionnalités |
|---|---|---|
lining-nums | Les lignes numérotées verticalement de sorte qu'elles adhèrent à la même hauteur sont alignées sur le même plan. | lnum |
oldstyle-nums | Permet un alignement vertical alternatif où les nombres ne sont pas toujours affichés uniformément sur la même ligne de base. | onum |
Valeurs numériques des fractions
| Évaluer | Description | Réglage des fonctionnalités |
|---|---|---|
diagonal-fractions | Affiche les fractions dans un format plus petit où le numérateur (nombre du haut) et le dénominateur (nombre du bas) sont divisés par une barre oblique. | frac |
stacked-fractions | Affiche les fractions dans un format plus petit où le numérateur et le dénominateur sont empilés les uns sur les autres et divisés par une ligne horizontale. | afrc |
Valeurs d'espacement numériques
| Évaluer | Description | Réglage des fonctionnalités |
|---|---|---|
proportional-nums | Permet aux nombres d'occuper leur propre espace dont la largeur n'est pas nécessairement égale aux autres chiffres. | pnum |
tabular-nums | Affiche les nombres avec une taille, une proportionnelle et un espacement égaux pour une mise en forme propre dans des contextes de données tabulaires. | tnum |
La spécification comprend une note spéciale sur l'utilisation de ordinalcar elle ressemble à l' supélément exposant mais est balisée différemment.
Pour les exposants:
sup ( font-variant-position: super; )Two squared is 22Pour les marqueurs ordinaux:
.ordinal ( font-variant-numeric: ordinal; )1stPrise en charge du navigateur
La font-variant-numericpropriété fait actuellement partie de la spécification de niveau 3 du module de polices CSS, qui est dans le statut de recommandation candidate au moment de la rédaction de cet article, ce qui signifie qu'elle peut changer à tout moment.
Bureau
| Chrome | Bord | Firefox | C'EST À DIRE | Opéra | Safari |
|---|---|---|---|---|---|
| 52 | Non | 34 | Non | 39 | 9.1 |
Firefox 24-34 (exclusif) prend en charge la propriété derrière la layout.css.font-features.enabledpréférence lorsqu'elle est définie sur true.
Mobile
| Navigateur Android | Chrome Android | Bord | Firefox | C'EST À DIRE | Opera Android | Safari sur iOS |
|---|---|---|---|---|---|---|
| 52 | 52 | Non | 34 | Non | 39 | Oui |