font-variant-position
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die font-variant-position CSS Eigenschaft steuert die Verwendung von alternativen, kleineren Glyphen, die als Hoch- oder Tiefstellung 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 Nutzung dieser alternativen Glyphen aktiviert ist, wird, falls ein Zeichen im Lauf keinen solchen typografisch verbesserten Glyphen hat, der gesamte Satz von Zeichen des Laufs mithilfe einer Ersatzmethode gerendert und diese Glyphen synthetisiert.
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;
Die font-variant-position Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.
Werte
normal-
Deaktiviert alternative Hoch- und Tiefstellungsglyphen.
sub-
Aktiviert alternative Tiefstellungsglyphen. Sollte in einem gegebenen Lauf ein solches Glyphe für ein Zeichen nicht verfügbar sein, werden alle Zeichen im Lauf mit synthetisierten Glyphen gerendert.
super-
Aktiviert alternative Hochstellungsglyphen. Sollte in einem gegebenen Lauf ein solches Glyphe für ein Zeichen nicht verfügbar sein, 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
Einstellung von Hoch- und Tiefstellungsformen
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
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-position-prop |