Signatur
Beschreibung
Die schreibgeschützte Eigenschaft stylistic einer CSSFontFeatureValuesRule bildet den @stylistic { … }-Block einer @font-feature-values-At-Regel im CSSOM ab. Jeder Eintrag verbindet einen selbst gewählten Namen (user-defined ident, z. B. alt-g) mit einem numerischen Feature-Index der Schriftart. Dieser Name kann anschließend in CSS über font-variant-alternates: stylistic(alt-g) verwendet werden und aktiviert intern das OpenType-Feature salt mit dem angegebenen Index.
Die zurückgegebene CSSFontFeatureValuesMap verhält sich wie eine Map: Sie bietet get(), has(), set(), delete(), clear(), forEach(), keys(), values(), entries() und size. Schlüssel sind Zeichenketten, Werte sind Arrays von nicht-negativen Ganzzahlen (bei stylistic ist genau ein Index sinnvoll).
Schreibgeschützt ist nur die Eigenschaft selbst – das Map-Objekt ist veränderbar. Damit lassen sich Stil-Alternativen einer Schriftart zur Laufzeit auslesen, ergänzen oder entfernen, etwa in Design-Tools, Schrift-Vorschauen oder Theme-Editoren, ohne das Stylesheet als Text neu zu schreiben.
Verwandte Eigenschaften derselben Regel sind swash, ornaments, annotation, styleset und characterVariant, die jeweils die entsprechenden Blöcke abbilden.
Rückgabewert
Name → number[] (Feature-Index) aus dem @stylistic-Block. Leer, wenn die Regel keinen solchen Block enthält.Beispiele
Stylistic-Werte einer @font-feature-values-Regel auslesen
// Stylesheet mit @font-feature-values dynamisch einfügen
const style = document.createElement('style');
style.textContent = `
@font-feature-values Inter {
@stylistic { alt-g: 1; alt-a: 2; }
}
h1 { font-family: Inter; font-variant-alternates: stylistic(alt-g); }
`;
document.head.append(style);
const rule = [...style.sheet.cssRules]
.find((r) => r instanceof CSSFontFeatureValuesRule);
if (rule && rule.stylistic) {
console.log(rule.fontFamily);
console.log(rule.stylistic.size);
for (const [name, indices] of rule.stylistic) {
console.log(name, indices);
}
}Neue Stil-Alternative zur Laufzeit hinzufügen
const rule = [...document.styleSheets]
.flatMap((sheet) => {
try { return [...sheet.cssRules]; } catch { return []; } // CORS-geschützte Sheets überspringen
})
.find((r) => r instanceof CSSFontFeatureValuesRule && r.fontFamily.includes('Inter'));
if (rule?.stylistic) {
rule.stylistic.set('round-dots', 3); // einzelne Zahl oder Array erlaubt
console.log(rule.stylistic.get('round-dots'));
// Direkt verwenden
document.querySelector('h1').style.fontVariantAlternates = 'stylistic(round-dots)';
}Feature-Erkennung und Aufräumen
const supportsMaps = typeof CSSFontFeatureValuesRule !== 'undefined'
&& 'stylistic' in CSSFontFeatureValuesRule.prototype;
console.log('stylistic unterstützt:', supportsMaps);
const removeStylistic = (rule, name) => {
if (!rule.stylistic?.has(name)) return false;
return rule.stylistic.delete(name);
};// Wichtig · Fallstricke
- Browser-Unterstützung: Die Map-Eigenschaften (
stylistic,swashusw.) sind vor allem in Chromium-Browsern ab Version 111 vorhanden. Andere Engines unterstützen zwar teils die@font-feature-values-Regel in CSS, stellen die Maps im CSSOM aber nicht oder nur eingeschränkt bereit – immer per'stylistic' in ruleprüfen. - Keine „variable Schriftart“ nötig: Entgegen mancher Kurzbeschreibungen geht es nicht um Variable Fonts, sondern um OpenType-Stilalternativen (
salt). Die Schrift muss dieses Feature tatsächlich enthalten, sonst hat der Index keine sichtbare Wirkung. - Die Eigenschaft ist schreibgeschützt:
rule.stylistic = …hat keine Wirkung (im Strict ModeTypeError). Änderungen erfolgen über die Map-Methoden. - Werte werden immer als Array zurückgegeben, auch wenn in CSS nur eine Zahl steht –
get('alt-g')liefert[1], nicht1. - Namen gelten nur für die in
fontFamilygenannten Schriftfamilien; bei andererfont-familywirdstylistic(name)ignoriert. - Beim Durchsuchen von
document.styleSheetswerfen Cross-Origin-Stylesheets ohne CORS-Freigabe beim Zugriff aufcssRuleseinenSecurityError.