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

Balises HTML sup et sub
Bonne compatibilité
Propriété vertical-align
Bonne compatibilité.
Change la hauteur des lignes.
Ne réduit pas la taille des caractères.
Propriété font-variant-position
Meilleurs glyphes.
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;
    Valeur super pour font-variant-position

    Mise en exposant.

    La valeur super est équivalent à font-feature-settings:'sups'.

  • font-variant-position: sub;
    Valeur sub pour font-variant-position

    Mise en indice.

    La valeur super est équivalent à font-feature-settings:'subs'.

  • font-variant-position: initial;

    La valeur initiale est normal.

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

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

Simulateur.

font-variant-position :
Formule chimique du sucre : C12H220

Surface du cercle = πd2/4