CSS font-variant Eigenschaft
Die CSS font-variant Eigenschaft legt fest, ob Text normal oder als Small-Caps dargestellt wird. Beispiele ausprobieren!
Die CSS-Eigenschaft font-variant steuert die Verwendung alternativer Glyphen in einer Schriftart — am häufigsten Small Caps (Kapitälchen). Small Caps stellen Kleinbuchstaben als Großbuchstaben dar, die ungefähr die Höhe der ursprünglichen Kleinbuchstaben haben, und verleihen Titeln, Abkürzungen und Akronymen ein elegantes, gleichmäßiges Erscheinungsbild, ohne wie reine Großschreibung zu wirken.
In seiner klassischen Form (CSS 1) nimmt font-variant einen von zwei Werten an: normal (der Standardwert) oder small-caps. Mit small-caps werden Kleinbuchstaben in Großbuchstaben-Glyphen umgewandelt, die etwas kleiner als reguläre Großbuchstaben angezeigt werden, während bereits großgeschriebene Buchstaben ihre normale Größe behalten.
Wann man es verwendet
font-variant: small-caps ist nützlich, wenn man eine Betonung wünscht, die elegant statt auffällig wirkt:
- Akronyme und Abkürzungen im Fließtext (z. B. "html", "css"), damit diese die Zeile nicht mit voll hohen Großbuchstaben dominieren.
- Drop-Cap oder Lead-in-Styling in der ersten Zeile eines Artikels, oft kombiniert mit ::first-line.
- Überschriften, Autorenzeilen und Bildunterschriften in redaktionellen oder druckähnlichen Layouts.
Da der Wert vererbt wird, gilt er bei Angabe auf einem Container für den gesamten untergeordneten Text, es sei denn, ein Kindelement überschreibt ihn.
Die Eigenschaft font-variant kann auch als Teil einer font-Kurzschreibweise angegeben werden, zusammen mit font-style, font-weight, font-size und font-family.
Im CSS Fonts Module Level 4 wurde font-variant zu einer Kurzschreibweise für eine Gruppe von Langform-Eigenschaften: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures und font-variant-east-asian. Dadurch können viele weitere Werte angegeben werden (z. B. all-small-caps, petite-caps, oldstyle-nums und slashed-zero). Die klassischen Werte normal und small-caps funktionieren überall; die Unterstützung der neueren Werte hängt vom Browser und davon ab, ob die gewählte Schriftart die entsprechenden Glyphen enthält.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM Syntax | object.style.fontVariant = "normal"; <br>(Hinweis: fontVariant ist der camelCase-JavaScript-Eigenschaftsname für font-variant.) |
Syntax
Syntax der CSS font-variant Eigenschaft
font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;Beispiel der font-variant Eigenschaft:
Beispiel der CSS font-variant Eigenschaft mit small-caps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">However, this text uses small-caps.</p>
</body>
</html>Ergebnis
Ein zweites Beispiel: all-small-caps
Der Wert all-small-caps (aus der Level-4-Kurzschreibweise) stellt jeden Buchstaben als Small Cap dar, einschließlich derjenigen, die bereits großgeschrieben waren — praktisch für Überschriften, bei denen ein einheitliches Small-Caps-Erscheinungsbild gewünscht wird.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.small {
font-variant: small-caps;
}
.all {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<p class="small">The Quick Brown Fox</p>
<p class="all">The Quick Brown Fox</p>
</body>
</html>Mit small-caps behalten die Großbuchstaben in "The", "Quick", "Brown" und "Fox" ihre volle Höhe; mit all-small-caps werden sie ebenfalls auf Small-Caps-Höhe reduziert.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| normal | Textzeichen werden normal dargestellt. Dies ist der Standardwert. | Ausprobieren » |
| small-caps | Wandelt Kleinbuchstaben in Großbuchstaben-Glyphen um, die kleiner dargestellt werden; vorhandene Großbuchstaben behalten ihre volle Größe. | Ausprobieren » |
| all-small-caps | Wandelt sowohl Klein- als auch Großbuchstaben in Small Caps um (Level 4). | Ausprobieren » |
| petite-caps | Wie small-caps, jedoch mit Petite-Caps-Glyphen, sofern die Schriftart diese bereitstellt (Level 4). | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert (normal). | Ausprobieren » |
| inherit | Erbt den Eigenschaftswert vom übergeordneten Element. |
Verwandte Eigenschaften
- font — die Kurzschreibweise, die
font-varianteinschließen kann. - font-style — normaler, kursiver oder schräger Text.
- font-weight — Stärke des Textes.
- text-transform — erzwingt
uppercase/lowercase/capitalize(ändert die Zeichen, im Gegensatz zu Small Caps, die nur die Glyphenform ändern). - letter-spacing — harmoniert gut mit Small Caps, um die Lesbarkeit von Akronymen zu verbessern.