CSS @font-feature-values Regel
Die @font-feature-values At-Regel weist Funktionen in der font-variant-alternates-Eigenschaft einen Namen zu. Werte und Beispiele.
Die @font-feature-values At-Regel ermöglicht es, einem numerischen OpenType-Feature-Index einen lesbaren Namen zuzuweisen, sodass Sie beim Verwenden der font-variant-alternates-Eigenschaft auf alternative Glyphen einer Schriftart per Name statt per Zahl verweisen können.
Diese Seite erklärt, welches Problem die Regel löst, ihre Syntax, die enthaltenen Feature-Blöcke sowie ein vollständiges Arbeitsbeispiel.
Warum sie existiert
Viele OpenType-Schriftarten enthalten alternative Glyphen zusätzlich zur Standardform jedes Zeichens — Swashes (dekorative Schnörkel), Ornamente, stilistische Alternativen, historische Formen und Ähnliches. Innerhalb der Schriftart wird jede Alternative nur durch eine Zahl (einen Index) identifiziert. Ohne diese At-Regel müsste man sich merken, dass beispielsweise „der elegante Swash Index 1 ist", und diese Zahl überall hart eincodieren.
@font-feature-values ermöglicht es, diese Zuordnung einmalig zu definieren, dem Index einen Namen wie fancy zu geben und dann swash(fancy) im CSS zu verwenden. Der Name gilt pro Schriftfamilie, sodass zwei verschiedene Schriftarten jeweils ihren eigenen fancy-Swash mit unterschiedlichen Indizes definieren können.
Zwei wichtige Hinweise:
- Es funktioniert ausschließlich mit
font-variant-alternates— auf keine andere Eigenschaft hat es Auswirkungen. - Es bewirkt nur etwas, wenn die passende Schriftart tatsächlich geladen ist und diese Schriftart die referenzierten alternativen Glyphen enthält. Wenn Sie stattdessen niedrigschwellige OpenType-Features über ihren vierstelligen Tag steuern möchten, verwenden Sie
font-feature-settings.
Die Regel kann auf der obersten Ebene eines Stylesheets oder innerhalb einer bedingten Gruppen-At-Regel wie @media platziert werden.
Feature-Blöcke
Der Körper der At-Regel kann einen der folgenden benannten Blöcke enthalten, die jeweils einen Namen einem Index zuordnen:
@swash@annotation@ornaments@stylistic@styleset@character-variant
Jeder Blockname entspricht der passenden funktionalen Notation in font-variant-alternates (ein @swash-Name wird von swash() verwendet, ein @ornaments-Name von ornaments() usw.).
Syntax
Syntax der CSS @font-feature-values At-Regel
@font-feature-values <family-name> {
@swash { name: index; }
@annotation { name: index; }
@ornaments { name: index; }
@stylistic { name: index; }
@styleset { name: index; }
@character-variant { name: index; }
}Beispiel der @font-feature-values At-Regel:
Beispiel der CSS @font-feature-values At-Regel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>@Font-feature-values at-rule example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>Hier benennt @swash { fancy: 1; } den Index 1 der Schriftart Leitura Display Swashes als fancy. Der Absatz .variant aktiviert dann diese Alternative mit font-variant-alternates: swash(fancy). Da die benannte Schriftart in diesem Snippet nicht geladen ist, fällt der Text auf eine Standardschriftart zurück und die Swashes werden nicht gerendert — der Sinn des Beispiels liegt in der Verdrahtung, nicht im visuellen Ergebnis. Binden Sie eine tatsächlich verfügbare Schriftart über @font-face ein, um die Alternativen zu sehen.
Browser-Unterstützung
@font-feature-values wird in Firefox, Safari und Chrome/Edge unterstützt (Chromium hat die Unterstützung in Version 128, August 2024 hinzugefügt). Internet Explorer hat es nie unterstützt. Da alternative Glyphen rein dekorativ sind, ist es sicher, sie als Progressive Enhancement zu behandeln: Browser und Schriftarten, die das Feature nicht unterstützen, zeigen einfach die Standardglyphe.
Werte
| Wert | Beschreibung |
|---|---|
| @swash | Gibt einen Feature-Namen an, der mit der Funktionsnotation swash() von font-variant-alternates verwendet wird. |
| @annotation | Gibt einen Feature-Namen an, der mit der Funktionsnotation annotation() von font-variant-alternates verwendet wird. |
| @ornaments | Gibt einen Feature-Namen an, der mit der Funktionsnotation ornaments() von font-variant-alternates verwendet wird. |
| @stylistic | Gibt einen Feature-Namen an, der mit der Funktionsnotation stylistic() von font-variant-alternates verwendet wird. |
| @styleset | Gibt einen Feature-Namen an, der mit der Funktionsnotation styleset() von font-variant-alternates verwendet wird. |
| @character-variant | Gibt einen Feature-Namen an, der mit der Funktionsnotation character-variant() von font-variant-alternates verwendet wird. |