font-variant-position
Baseline
2023
*
Newly available
Depuis September 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS 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>.
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
/* 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: revert;
font-variant-position: revert-layer;
font-variant-position: unset;
La propriété font-variant-position se définit avec l'une des valeurs par mot-clé listées ci-dessous.
Valeurs
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | all elements and text. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
font-variant-position =
normal |
sub |
super
Exemples
Définir les formes exposant et indice
HTML
<p class="normal">Normal !</p>
<p class="super">Exposant !</p>
<p class="sub">Indice !</p>
CSS
p {
display: inline;
}
.normal {
font-variant-position: normal;
}
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-position-prop |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
font-variant - La propriété
font-variant-alternates - La propriété
font-variant-caps - La propriété
font-variant-east-asian - La propriété
font-variant-emoji - La propriété
font-variant-ligatures - La propriété
font-variant-numeric