font-variant-position

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La propriété font-variant-position permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).

Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML <sub> et <sup>.

css
/* Valeurs avec un mot-clé */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

/* Valeurs globales */
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;

Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.

Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.

Syntaxe

La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.

Valeurs

normal

Les glyphes alternatifs sont désactivés.

sub

Ce mot-clé permet d'utiliser les glyphes utilisés en indice.

super

Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.

Définition formelle

Valeur initialenormal
Applicabilitéall elements and text. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

font-variant-position = 
normal |
sub |
super

Exemples

CSS

css
.exemple {
  font-variant-position: super;
}

HTML

html
<p>
  Alice <span class="exemple">ne s’était pas fait le moindre mal.</span>
  Vite elle se remet sur ses pieds et regarde en l’air&nbsp;; mais tout est noir
  là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à
  toutes jambes.
</p>

Résultat

Spécifications

Specification
CSS Fonts Module Level 4
# font-variant-position-prop

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant-position
normal
sub
super

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.