CSS font-variant-caps-Eigenschaft
In CSS1 und CSS2 legte die Eigenschaft font-variant Small Caps fest. In CSS3 wurde sie zu einer Kurzschreibweise für mehrere Eigenschaften, darunter font-variant-caps. Diese Eigenschaft ermöglicht die Auswahl alternativer Glyphen für Small Caps, Petite Caps und Titling Caps. Häufige Werte sind:
- normal
- small-caps
- all-small-caps
- petite-caps
- all-petite-caps
- unicase
- titling-caps
Wenn eine bestimmte Schriftart Großbuchstaben-Glyphen in verschiedenen Größen enthält, wählt die Eigenschaft font-variant-caps die am besten geeigneten aus. Wenn Small-Caps-Glyphen nicht verfügbar sind, werden sie mit Großbuchstaben-Glyphen gerendert.
Die tatsächliche Darstellung hängt von der OpenType-Feature-Unterstützung der Schriftart ab.
| Anfangswert | normal |
|---|---|
| Anwendbar auf | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.fontVariantCaps = "petite-caps"; |
Syntax
Syntax der CSS font-variant-caps-Eigenschaft
font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;Beispiel für die font-variant-caps-Eigenschaft:
Beispiel für die CSS font-variant-caps-Eigenschaft mit den Werten all-small-caps, small-caps und normal
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.all-small-caps {
font-variant-caps: all-small-caps;
}
.small-caps {
font-variant-caps: small-caps;
}
.normal {
font-variant-caps: normal;
}
</style>
</head>
<body>
<h2>Font-variant-caps property example</h2>
<p class="all-small-caps">
The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
</p>
<p class="small-caps">Small caps!</p>
<p class="normal">Normal caps!</p>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung |
|---|---|
| normal | Die Verwendung alternativer Glyphen ist nicht aktiviert. |
| small-caps | Zeigt Small Caps an. Small-Caps-Glyphen verwenden die Form von Großbuchstaben, sind aber auf die Größe von Kleinbuchstaben reduziert. |
| all-small-caps | Zeigt Small Caps für Groß- und Kleinbuchstaben an. |
| petite-caps | Zeigt Petite Caps an. |
| all-petite-caps | Zeigt Petite Caps für Groß- und Kleinbuchstaben an. |
| unicase | Zeigt eine Mischung aus Small Caps für Großbuchstaben und normalen Kleinbuchstaben an. |
| titling-caps | Zeigt Titling Caps an. |
Hinweis: initial und inherit sind CSS-weite Schlüsselwörter und können mit jeder CSS-Eigenschaft verwendet werden.
Browser-Kompatibilität
| Browser | Support |
|---|---|
| Chrome | 48+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 9.1+ |
| Opera | 35+ |
Hinweis: font-variant-caps ist Teil der Kurzschreibweise font-variant. Wenn Sie die Kurzschreibweise verwenden, geben Sie font-variant-caps explizit an, um seinen Wert beizubehalten, da andere Werte der Kurzschreibweise ihn überschreiben können.
Praxis
Was macht die CSS-Eigenschaft 'font-variant-caps'?