FontFace.style — Eigenschaft · JavaScript-Referenz

Signatur

FontFace.style

Beschreibung

Die Eigenschaft style des Interfaces FontFace entspricht dem Deskriptor font-style einer @font-face-Regel in CSS. Sie legt fest, für welchen Schriftstil die geladene Schriftdatei zuständig ist. Wenn der Browser später Text mit font-style: italic darstellt, wählt er aus der Schriftfamilie die FontFace aus, deren style am besten passt.

Den Wert übergibt man meist schon beim Erzeugen im descriptors-Objekt des Konstruktors: new FontFace(family, source, { style: "italic" }). Man kann ihn aber auch nachträglich lesen und ändern. Erlaubt sind "normal", "italic" und "oblique". Nur bei variablen Schriften mit Neigungsachse kann man bei oblique zusätzlich einen Winkel oder einen Winkelbereich angeben, zum Beispiel "oblique 5deg 20deg".

Typische Anwendungsfälle:

Schriftschnitte dynamisch laden, etwa den Kursivschnitt erst dann, wenn er gebraucht wird.
Mehrere Dateien einer Schriftfamilie (normal und kursiv) unter demselben family-Namen registrieren.
Die in document.fonts registrierten Schriften prüfen oder auflisten.

style sagt nur aus, welchem Stil die Datei zugeordnet ist. Die Glyphen selbst verändert die Eigenschaft nicht. Setzt man eine aufrechte Schriftdatei auf "italic", wird sie deshalb nicht kursiv angezeigt.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"normal"	Beim Setzen: ein gültiger Wert für den CSS-Deskriptor `font-style`, also `"normal"`, `"italic"`, `"oblique"` oder `"oblique <Winkel> [<Winkel>]"`.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Stil-Deskriptor als String, zum Beispiel "normal" oder "italic". Der Browser kann den Wert normalisiert zurückgeben: Aus "oblique 14deg" wird je nach Browser zum Beispiel "oblique", weil 14° der Standardwinkel ist.

Beispiele

Kursivschnitt beim Erzeugen festlegen und auslesen

const italic = new FontFace(
  "Inter",
  "url(/fonts/Inter-Italic.woff2) format('woff2')",
  { style: "italic", weight: "400" }
);

console.log(italic.style);

await italic.load();
document.fonts.add(italic);
// Ab jetzt nutzt <em> in font-family: Inter diesen Schnitt

italic

Normal- und Kursivschnitt derselben Familie registrieren

const loadFamily = async (family, files) => {
  const faces = files.map(({ url, style }) =>
    new FontFace(family, `url(${url})`, { style })
  );
  const loaded = await Promise.all(faces.map((f) => f.load()));
  loaded.forEach((f) => document.fonts.add(f));
  return loaded.map((f) => `${f.family} – ${f.style}`);
};

const result = await loadFamily("Merriweather", [
  { url: "/fonts/Merriweather-Regular.woff2", style: "normal" },
  { url: "/fonts/Merriweather-Italic.woff2", style: "italic" }
]);
console.log(result);

["Merriweather – normal", "Merriweather – italic"]

Stil nachträglich ändern und ungültige Werte abfangen

const face = new FontFace("Demo", "url(/fonts/Demo.woff2)");
console.log(face.style); // Standardwert

face.style = "oblique 10deg";
console.log(face.style);

try {
  face.style = "schraeg"; // kein gültiger font-style-Wert
} catch (err) {
  console.log(err.name);
}

normal oblique 10deg SyntaxError

Alle registrierten kursiven Schriften auflisten

const italicFaces = [...document.fonts]
  .filter((face) => face.style === "italic")
  .map((face) => `${face.family} (${face.weight})`);

console.log(italicFaces);

["Inter (400)", "Merriweather (normal)"]

// Wichtig · Fallstricke

Ungültige Werte: Wird style auf einen String gesetzt, der kein gültiger font-style-Wert ist, wirft der Browser einen SyntaxError (DOMException). Übergibt man den ungültigen Wert dagegen im Konstruktor, wirft der Konstruktor keinen Fehler. Stattdessen geht die FontFace in den Status "error" über, und das Promise von load() bzw. loaded wird zurückgewiesen.
Nur eine Zuordnung, keine Darstellung: style ändert die Glyphen nicht. Ist für einen Stil keine passende Datei registriert, erzeugt der Browser möglicherweise eine synthetische Kursive, also schräg gestellte Glyphen. Das lässt sich mit font-synthesis: none unterbinden.
Normalisierung: Der zurückgelesene Wert kann vom gesetzten abweichen, zum Beispiel wenn der Browser Winkel vereinfacht. Vergleiche mit === deshalb vorsichtig einsetzen.
Änderungen nach dem Laden: Wie sich die Schriftauswahl verhält, wenn man style ändert, nachdem die Schrift schon zu document.fonts hinzugefügt wurde, ist nicht in allen Browsern einheitlich. Deshalb den Stil am besten schon im Konstruktor festlegen.
Kompatibilität: Die CSS Font Loading API wird von Chrome, Edge, Firefox und Safari unterstützt, auch in Web Workern über self.fonts. Winkelbereiche bei oblique setzen neuere Browserversionen voraus.

Siehe auch

Document.fonts FontFace.status FontFace.family FontFace.loaded FontFace.stretch