Die Eigenschaft @font-feature-values at-rule stellen einen benannten Wert für ein bestimmtes Schriftmerkmal einer Schriftfamilie ein.
Die Eigenschaft @font-feature-values at-rule können einen der folgenden Merkmalswerte enthalten:
- @annotation
- @ornaments
- @stylistic
- @styleset
- @character-variant
Anfangswert | swash |
Gilt für | Alle Elemente |
Geerbt | Ja |
Animierbar | Nein |
Version | CSS3 |
DOM Syntax | object.style.fontFeatureValues = "swash"; |
Syntax
@font-feature-values: @swash | @annotation | @ornaments | @stylistic | @styleset | @character-variant;
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1; }
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft @Font-feature-values property example</h2>
<p>
Die CSS-Eigenschaft font-variant-alternates steuert die Verwendung alternativer Glyphen. Diese alternativen Glyphen können durch alternative Namen, die in @font-feature-values definiert sind, referenziert werden.
</p>
<p>Diese Eigenschaft wird von Firefox und Safari unterstützt.</p>
<p class="variant">Diese Eigenschaft wird von Firefox und Safari unterstützt.</p>
</body>
</html>
Werte
Wert | Beschreibung |
---|---|
@swash | Gibt einen Feature-Namen an, der mit der funktionalen Notation swash() von font-variant-alternates funktioniert. Es ist nur ein Wert erlaubt. |
@annotation | Gibt einen Feature-Namen an, der mit der funktionalen Notation annotation() von font-variant-alternates funktioniert. Es ist nur ein Wert erlaubt. |
@ornaments | Gibt einen Feature-Namen an, der mit der funktionalen Notation ornaments() von font-variant-alternates funktioniert. Ein Wert ist erlaubt. |
@stylistic | Gibt einen Feature-Namen an, der mit der stylistic() funktionalen Notation von von font-variant-alternates funktioniert. Es ist nur ein Wert erlaubt. |
@styleset | Gibt einen Feature-Namen an, der mit der funktionalen Notation styleset() von font-variant-alternates funktioniert. Die Anzahl der Werte ist unbegrenzt. |
@character-variant | Gibt einen Funktionsnamen an, der mit der funktionalen Notation character-variant() von font-variant-alternates funktioniert. Es sind ein oder zwei Werte erlaubt. |
initial | Der Wert stellt die Eigenschaft auf seinen Standardwert ein. |
inherit | Der Wert erbt die Eigenschaft von seinem übergeordneten Element. |
Browser-Support
✕ | ✕ | 34.0+ | 9.1+ | ✕ |
Übe dein Wissen
Was ermöglicht die CSS-Regel 'font-feature-values' in Webdesign?
Richtig!
Falsch!