CSSFontFeatureValuesRule
Baseline 2025
Neu verfügbar
*
Seit März 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSSFontFeatureValuesRule-Schnittstelle repräsentiert eine @font-feature-values At-Regel. Die Werte ihrer Instanzeigenschaften können mit der CSSFontFeatureValuesMap-Schnittstelle zugegriffen werden.
@font-feature-values ermöglicht es Entwicklern, für einen bestimmten Schriftschnitt einen menschenlesbaren Namen mit einem numerischen Index zu verknüpfen, der ein bestimmtes OpenType-Schriftmerkmal steuert. Für Merkmale, die alternative Glyphen auswählen (stilistisch, Styleset, Zeichenvariante, Swash, Ornament oder Annotation), kann die font-variant-alternates-Eigenschaft dann den menschenlesbaren Namen referenzieren, um das zugehörige Merkmal anzuwenden. Dies ist praktisch, da es ermöglicht, denselben Namen zu verwenden, um eine Reihe alternativer Glyphen über mehrere Schriften hinweg darzustellen.
Instanzeigenschaften
Erbt Eigenschaften von seinem Vorfahren CSSRule.
CSSFontFeatureValuesRule.annotation-
Eine benutzerdefinierte Wertedefinition und ein Wert, der eine alternative Annotation der Schrift anwendet.
CSSFontFeatureValuesRule.characterVariant-
Eine benutzerdefinierte Wertedefinition und ein Wert, der stilistische Alternativen für Zeichen der Schrift anwendet.
CSSFontFeatureValuesRule.fontFamily-
Eine Zeichenfolge, die die Schriftfamilie identifiziert, auf die diese Regel angewendet wird.
CSSFontFeatureValuesRule.ornaments-
Eine benutzerdefinierte Wertedefinition und ein Wert, der alternative Ornamente der Schrift anwendet.
CSSFontFeatureValuesRule.styleset-
Eine benutzerdefinierte Wertedefinition und ein Wert, der alternative Style-Sets der Schrift anwendet.
CSSFontFeatureValuesRule.stylistic-
Eine benutzerdefinierte Wertedefinition und ein Wert, der alternative Glyphen der Schrift anwendet.
CSSFontFeatureValuesRule.swash-
Eine benutzerdefinierte Wertedefinition und ein Wert, der alternative Swashes der Schrift anwendet.
Instanzmethoden
Erbt Methoden von seinem Vorfahren CSSRule.
Beispiele
Schriftfamilie lesen
In diesem Beispiel deklarieren wir zwei @font-feature-values für die Schriftfamilie Font One und Font Two. In beiden Deklarationen definieren wir, dass der Name "nice-style" verwendet werden kann, um die Styleset-alternativen Glyphen für beide Schriften darzustellen, indem der Index für diese Alternative in jeder Schriftfamilie angegeben wird. Die alternativen Glyphen werden dann für jede .nice-look-Klasse angewendet, indem font-variant-alternates verwendet wird und der Name an die styleset()-Funktion übergeben wird.
Wir verwenden dann das CSSOM, um diese Deklaration als CSSFontFeatureValuesRule-Instanzen zu lesen und sie im Protokoll anzuzeigen.
CSS
/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
@styleset {
nice-style: 12; /* name used to represent the alternate set of glyphs at index 12 */
}
}
/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
@styleset {
nice-style: 4;
}
}
/* Apply the at-rules with a single declaration */
.nice-look {
font-variant-alternates: styleset(
nice-style
); /* name selects different index for same alternate in different fonts */
}
JavaScript
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
const rules = document.getElementById("css-output").sheet.cssRules;
const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log(`The 1st '@font-feature-values' family: "${fontOne.fontFamily}".`);
const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log(`The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}"`);
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # om-fontfeaturevalues |