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.
Want more browser support for this feature? Tell us why.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die font-variant-position CSS-Eigenschaft kontrolliert die Verwendung von alternativen, kleineren Glyphen, die als Hoch- 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 in der Zeichenfolge nicht über ein solch typografisch verbessertes Glyph verfügt, wird die gesamte Zeichenfolge mit einer Fallback-Methode gerendert, wobei diese Glyphen synthetisiert werden.
Diese alternativen Glyphen teilen sich die gleiche Em-Box und die gleiche Grundlinie 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;
Werte
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
normal-
Deaktiviert alternative Hoch- und Tiefgestellt-Glyphen.
sub-
Aktiviert alternative tiefgestellte Glyphen. Wenn in einer gegebenen Zeichenfolge ein solches Glyph für ein Zeichen nicht verfügbar ist, werden alle Zeichen in der Sequenz mit synthetisierten Glyphen gerendert.
super-
Aktiviert alternative hochgestellte Glyphen. Wenn in einer gegebenen Zeichenfolge ein solches Glyph für ein Zeichen nicht verfügbar ist, werden alle Zeichen in der Sequenz 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
Einstellen von hoch- und tiefgestellten Formen
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 |