font-variant
Active des variantes de la police, par exemple les petites capitales ou des chiffres de largeur égale.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.fontVariant = "small-caps"
Exemple
#.scoreboard {
font-variant-numeric: tabular-nums;
}<table class="scoreboard stage" style="font-variant-numeric: tabular-nums;">
<tr><td>Léa</td><td style="text-align: right; padding-left: 24px;">1 240</td></tr>
<tr><td>Lucas</td><td style="text-align: right; padding-left: 24px;">980</td></tr>
<tr><td>Emma</td><td style="text-align: right; padding-left: 24px;">11 115</td></tr>
</table>Définition et utilisation
#La propriété font-variant est un raccourci pour plusieurs propriétés qui contrôlent les caractères alternatifs d’une police. Sa valeur la plus connue est small-caps, les petites capitales : les minuscules sont remplacées par des majuscules réduites.
Des propriétés composantes plus récentes, comme font-variant-numeric, permettent par exemple d’activer des chiffres de largeur égale (tabular-nums). Les nombres dans les tableaux et les compteurs ne bougent alors plus quand la valeur change.
L’effet dépend de la police. Si elle n’a pas de véritables petites capitales, le navigateur les génère artificiellement, et les variantes OpenType ne s’activent tout simplement pas.
Syntaxe
#font-variant: normal | small-caps | <variantes OpenType>;Valeurs
#- Les caractères normaux de la police.
- Petites capitales : les minuscules deviennent des majuscules réduites.
- Des chiffres de largeur égale. Illustré ici avec le nombre 1 234 567.
Valeurs en pratique
#normal
.demo { font-variant: normal; }small-caps
.demo { font-variant: small-caps; }tabular-nums
.demo { font-variant: tabular-nums; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Dans les classements, les grilles tarifaires et les compteurs, activez
font-variant-numeric: tabular-numspour que les colonnes de chiffres s’alignent parfaitement. - Les petites capitales fonctionnent bien pour les sigles, par exemple « NASA » dans du texte courant.
Entrées associées
#- fontRaccourci qui définit le style, la graisse, la taille, l’interligne et la police en une seule fois.
- text-transformChange la casse des lettres : tout en majuscules, tout en minuscules, ou une majuscule au début de chaque mot.
- font-familyChoisit une police, avec une liste de polices de secours en cas d’indisponibilité de la première.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.