FontFace.featureSettings — Eigenschaft · JavaScript-Referenz

Signatur

FontFace.featureSettings

Beschreibung

Die Eigenschaft featureSettings des FontFace-Interfaces entspricht dem CSS-Deskriptor font-feature-settings innerhalb einer @font-face-Regel. Damit steuern Sie Low-Level-OpenType-Features wie Ligaturen (liga, dlig), Mediävalziffern (onum), Tabellenziffern (tnum), Kapitälchen (smcp) oder Stilsets (ss01 bis ss20) direkt auf Ebene der Schrift.

Der Wert ist ein String in derselben Syntax wie in CSS: eine kommagetrennte Liste von vierstelligen Feature-Tags in Anführungszeichen, jeweils optional gefolgt von einem Wert (1/on, 0/off oder eine Ganzzahl für alternative Glyphen). Der Standardwert ist "normal". Sie können den Wert beim Erzeugen über das descriptors-Objekt des Konstruktors ({ featureSettings: '"tnum" 1' }) oder nachträglich per Zuweisung setzen.

Die Einstellung wirkt für jedes Element, das diese Schrift verwendet – praktisch, wenn z. B. eine per JavaScript geladene Zahlenschrift immer Tabellenziffern nutzen soll. Für einzelne Elemente sind die höherstufigen CSS-Eigenschaften wie font-variant-numeric oder font-variant-ligatures meist die bessere Wahl; featureSettings ist für seltene Features gedacht, für die es keine eigene Eigenschaft gibt.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	"normal"	Beim Setzen: gültiger `font-feature-settings`-Wert, z. B. `'"liga" 0, "tnum" 1'` oder `'normal'`.

Rückgabewert

Typ

string

Beschreibung

Die aktuellen Feature-Einstellungen als (vom Browser ggf. normalisierter) CSS-String, standardmäßig "normal".

Beispiele

Feature-Einstellungen im Konstruktor festlegen

const font = new FontFace(
  'Inter',
  'url(/fonts/Inter.woff2)',
  { featureSettings: '"tnum" 1, "ss01" 1' }
);

console.log(font.featureSettings);

await font.load();
document.fonts.add(font);
document.querySelector('.preis').style.fontFamily = 'Inter';

"tnum" 1, "ss01" 1

Standardwert auslesen und nachträglich ändern

const font = new FontFace('Serif Pro', 'url(/fonts/serif-pro.woff2)');
console.log(font.featureSettings); // Standard

// Standardligaturen aus, Kapitälchen an
font.featureSettings = '"liga" 0, "smcp" 1';
console.log(font.featureSettings);

normal "liga" 0, "smcp" 1

Ungültige Werte abfangen

const font = new FontFace('Demo', 'url(/fonts/demo.woff2)');

const setFeatures = (face, value) => {
  try {
    face.featureSettings = value;
    return true;
  } catch (err) {
    console.warn(`Ungültiger Wert: ${value} (${err.name})`);
    return false;
  }
};

setFeatures(font, '"onum" 1');   // gültig
setFeatures(font, 'onum');       // Tag ohne Anführungszeichen
console.log(font.featureSettings);

Ungültiger Wert: onum (SyntaxError) "onum" 1

// Wichtig · Fallstricke

Syntax: Feature-Tags müssen genau vier ASCII-Zeichen lang sein und in Anführungszeichen stehen. Ungültige Werte führen beim Setzen zu einer SyntaxError-DOMException; im Konstruktor wird die FontFace stattdessen auf status = \"error\" gesetzt und loaded abgelehnt.
Schrift muss das Feature enthalten: Fehlt ein Feature in der Schriftdatei, wird es ohne Fehlermeldung ignoriert.
Kompatibilität: Die Eigenschaft ist in allen modernen Browsern vorhanden, ob sie aber tatsächlich auf die Darstellung wirkt, ist unterschiedlich umgesetzt (Chromium ignoriert den @font-face-Deskriptor font-feature-settings teilweise). Im Zweifel zusätzlich font-feature-settings oder font-variant-* per CSS am Element setzen.
Priorität: Einstellungen am Element per CSS (font-feature-settings, font-variant-*) überschreiben die Werte auf Schriftebene.
Bevorzugen Sie höherstufige Eigenschaften wie font-variant-numeric, da sie vererbbar und besser lesbar sind und sich nicht gegenseitig vollständig überschreiben.

Siehe auch

FontFace.unicodeRange FontFace.variationSettings FontFace.status FontFace.stretch FontFace.family