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 werden relativ zur Basislinie der Schrift positioniert, die unverändert bleibt. Diese Glyphen werden typischerweise in den Elementen <sub> und <sup> verwendet.
Wenn die Verwendung dieser alternativen Glyphen aktiviert ist und ein Zeichen im Lauf keine typografisch verbesserte Glyphe hat, wird die gesamte Zeichenreihe des Laufs mit einer Fallback-Methode gerendert, die diese Glyphen synthetisiert.
Diese alternativen Glyphen teilen sich den gleichen em-Kasten 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 eines der unten aufgeführten Schlüsselwörter angegeben.
Werte
normal-
Deaktiviert alternative Hoch- und Tiefstellungsglyphen.
sub-
Aktiviert alternative Tiefstellungsglyphen. Wenn in einem gegebenen Lauf eine solche Glyphe für ein Zeichen nicht verfügbar ist, werden alle Zeichen im Lauf mit synthetisierten Glyphen gerendert.
super-
Aktiviert alternative Hochstellungsglyphen. Wenn in einem gegebenen Lauf eine solche 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
Einstellen 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 |
Browser-Kompatibilität
Loading…