CSSFontFeatureValuesRule
Baseline
2025
*
Newly available
Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Die CSSFontFeatureValuesRule Schnittstelle stellt eine @font-feature-values At-Regel dar. Die Werte ihrer Instanzeigenschaften können mit der CSSFontFeatureValuesMap Schnittstelle abgerufen werden.
@font-feature-values ermöglicht es Entwicklern, für einen gegebenen Schriftschnitt, einen lesbaren Namen einem numerischen Index zuzuordnen, der ein bestimmtes OpenType-Schriftmerkmal steuert.
Für Merkmale, die alternative Glyphen auswählen (wie stilistische, Styleset, Zeichenvariante, Zierstriche, Ornamente oder Annotationen), kann die font-variant-alternates Eigenschaft dann den lesbaren Namen referenzieren, um das zugehörige Merkmal anzuwenden.
Dies ist praktisch, da es ermöglicht, denselben Namen zu verwenden, um einen Satz alternativer Glyphen über mehrere Schriften hinweg darzustellen.
Instanzeigenschaften
Erbt Eigenschaften von seinem Vorfahren CSSRule.
CSSFontFeatureValuesRule.annotation-
Eine vom Benutzer definierte Wertdefinition und ein Wert, die eine alternative Annotation der Schrift anwenden.
CSSFontFeatureValuesRule.characterVariant-
Eine vom Benutzer definierte Wertdefinition und ein Wert, die stilistische Alternativen für Zeichen der Schrift anwenden.
CSSFontFeatureValuesRule.fontFamily-
Ein String, der die Schriftfamilie identifiziert, auf die diese Regel angewendet wird.
CSSFontFeatureValuesRule.ornaments-
Eine vom Benutzer definierte Wertdefinition und ein Wert, die alternative Ornamente der Schrift anwenden.
CSSFontFeatureValuesRule.styleset-
Eine vom Benutzer definierte Wertdefinition und ein Wert, die alternative Stylesets der Schrift anwenden.
CSSFontFeatureValuesRule.stylistic-
Eine vom Benutzer definierte Wertdefinition und ein Wert, die alternative Glyphen der Schrift anwenden.
CSSFontFeatureValuesRule.swash-
Eine vom Benutzer definierte Wertdefinition und ein Wert, die alternative Zierstriche der Schrift anwenden.
Instanzmethoden
Erbt Methoden von seinem Vorfahren CSSRule.
Beispiele
Schriftfamilie lesen
In diesem Beispiel deklarieren wir zwei @font-feature-values, eine für die Font One Schriftfamilie und die andere für Font Two.
In beiden Deklarationen definieren wir, dass der Name "nice-style" verwendet werden kann, um Styleset-Alternativglyphen 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 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
| Specification |
|---|
| CSS Fonts Module Level 4 # cssfontfeaturevaluesrule |