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 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 Durchlauf nicht über eine solche typographisch verbesserte Glyphe verfügt, wird der gesamte Zeichensatz des Durchlaufs mithilfe einer Fallback-Methode gerendert, um diese Glyphen zu synthetisieren.
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 tiefgestellte Glyphen.
sub-
Aktiviert tiefgestellte alternative Glyphen. Wenn in einem gegebenen Durchlauf für ein Zeichen eine solche Glyphe nicht verfügbar ist, werden alle Zeichen im Durchlauf unter Verwendung synthetisierter Glyphen gerendert.
super-
Aktiviert hochgestellte alternative Glyphen. Wenn in einem gegebenen Durchlauf für ein Zeichen eine solche Glyphe nicht verfügbar ist, werden alle Zeichen im Durchlauf unter Verwendung synthetisierter 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 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
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-position-prop |