font-variant-position CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die font-variant-position CSS Eigenschaft steuert die Verwendung von alternativen, kleineren Glyphen, die als hochgestellt oder tiefgestellt positioniert sind.
Die Glyphen sind relativ zur Grundlinie der Schrift positioniert, die unverändert bleibt. Diese Glyphen werden typischerweise in <sub> und <sup> Elementen verwendet.
Wenn die Verwendung dieser alternativen Glyphen aktiviert ist und ein Zeichen im Lauf nicht über ein solches typographisch verbessertes Glyphe verfügt, wird die gesamte Zeichengruppe des Laufs mithilfe einer Fallback-Methode gerendert, die diese Glyphen synthetisiert.
Diese alternativen Glyphen teilen die gleiche em-Box und die gleiche Basislinie wie der Rest der Schrift. Sie sind lediglich grafisch verbessert und haben keinen Einfluss auf die Zeilenhöhe und andere Box-Eigenschaften.
Syntax
/* Keyword values */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
/* Global values */
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: revert;
font-variant-position: revert-layer;
font-variant-position: unset;
Die font-variant-position Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
normal-
Deaktiviert alternative hoch- und tiefgestellte Glyphen.
sub-
Aktiviert alternative tiefgestellte Glyphen. Wenn in einem bestimmten Lauf ein solches Glyphe für ein Zeichen nicht verfügbar ist, werden alle Zeichen im Lauf mit synthetisierten Glyphen gerendert.
super-
Aktiviert alternative hochgestellte Glyphen. Wenn in einem bestimmten Lauf ein solches Glyphe für ein Zeichen nicht verfügbar ist, werden alle Zeichen im Lauf mit synthetisierten Glyphen gerendert.
Formale Definition
| Anfangswert | normal |
|---|---|
| Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
font-variant-position =
normal |
sub |
super
Beispiele
Hochgestellte und tiefgestellte Formen setzen
HTML
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
CSS
p {
display: inline;
}
.normal {
font-variant-position: normal;
}
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-variant-position-prop |