font-variant-position

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

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

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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.

Syntaxe formelle

normal | sub | super

Exemples

CSS

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

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

Spécification État Commentaires
CSS Fonts Module Level 3
La définition de 'font-variant-position' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 34
Support complet 34
Aucun support 24 — 34
Désactivée
Désactivée From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 34
Support complet 34
Aucun support 24 — 34
Désactivée
Désactivée From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,