CSS - Propriété font-variant-position
Description de la propriété font-variant-position
.
La propriété font-variant-position
permet la mise en indice ou en exposant.
Elle semble faire double emploi avec la propriété vertical-align
ou avec les balise HTML sub
et sup, mais la différence vient du fait que font-variant-position
exploite les possibilités des polices
OTF, alors que les autres solutions procèdent par calcul.
Ce qui signifie que font-variant-position
peut utiliser pour les exposants ou les indices, des glyphes différents
de ceux utilisés pour les caractères standards. Ces glyphes sont fournis par la police et mieux adaptés à la
mise en indice ou en exposant.
vertical-align
Change la hauteur des lignes.
Ne réduit pas la taille des caractères.
font-variant-position
Pas tous les caractères (1).
Dépend de la police.
(1) Les polices ne fournissent jamais les glyphes exposant et indice pour l'ensemble des caractères.. En général c'est uniquement les nombres qui sont déclinés en exposant et indice.
Ci-dessous un résultat comparé entre les trois méthodes. ⚠
Votre navigateur ne traite pas la propriété font-variant-position
: le troisième exemple ne fonctionne pas.
Balises sup et sub.
Ce premier texte contient des
exposants et des indices mis en forme
avec les balises HTML sup et sub.
vertical-align
.
Ce troisième texte contient des
exposants et des indices mis en forme
avec la propriété vertical-align
.
font-variant-position
.
Ce deuxième texte contient des
exposants et des indices mis en forme
avec la propriété font-variant-position
.
Voir aussi la propriété raccourcie font-variant
, et la propriété font-feature-settings
pour une
présentation générale des possibilités des polices OTF.
Syntaxes pour font-variant-position
.
Les exemples donnés ci-dessous sont des simulations, afin d'être lisibles sur tous les navigateurs, y compris
ceux qui ne traitent pas la propriété font-variant-position
.
- font-variant-position: normal;
Valeur par défaut. Les caractères sont sur la ligne de base.
- font-variant-position: super;
Mise en exposant.
La valeur
super
est équivalent àfont-feature-settings:'sups'
. - font-variant-position: sub;
Mise en indice.
La valeur
super
est équivalent àfont-feature-settings:'subs'
. - font-variant-position:
initial
;La valeur initiale est
normal
. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
font-variant-position
:
Surface du cercle = πd2/4