FontFace: FontFace() Konstruktor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Der FontFace() Konstruktor erstellt ein neues FontFace-Objekt.

Syntax

new FontFace(family, source)
new FontFace(family, source, descriptors)

Parameter

family

Gibt einen Schriftfamiliennamen an, der verwendet werden kann, um beim Stylen von Elementen mit dieser Schriftart abzugleichen.

Nimmt die gleichen Arten von Werten an wie der font-family Deskriptor von @font-face. Dieser Wert kann auch über die FontFace.family-Eigenschaft gelesen und gesetzt werden.

source

Die Schriftquelle. Dies kann entweder sein:

Eine URL zu einer Schriftartdatei.
Binäre Schriftartendaten in einem ArrayBuffer oder in einer TypedArray.

descriptors Optional

Eine Menge optionaler Deskriptoren, die als Objekt übergeben werden. Es kann jeden der für @font-face verfügbaren Deskriptoren enthalten:

ascentOverride: Mit einem zulässigen Wert für ascent-override.
descentOverride: Mit einem zulässigen Wert für descent-override.
display: Mit einem zulässigen Wert für font-display.
featureSettings: Mit einem zulässigen Wert für font-feature-settings.
lineGapOverride: Mit einem zulässigen Wert für line-gap-override.
stretch: Mit einem zulässigen Wert für font-stretch.
style: Mit einem zulässigen Wert für font-style.
unicodeRange: Mit einem zulässigen Wert für unicode-range.
variationSettings: Mit einem zulässigen Wert für font-variation-settings.
weight: Mit einem zulässigen Wert für font-weight.

Ausnahmen

SyntaxError DOMException: Wird ausgelöst, wenn eine Deskriptor-Zeichenfolge nicht der Grammatik des entsprechenden @font-face Deskriptors entspricht oder die angegebene Binärquelle nicht geladen werden kann. Dieser Fehler führt dazu, dass FontFace.status auf error gesetzt wird.

Beispiele

async function loadFonts() {
  const font = new FontFace("my-font", "url(my-font.woff)", {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  });
  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);
  // enable font with CSS class
  document.body.classList.add("fonts-loaded");
}

Spezifikationen

Specification
CSS Font Loading Module Level 3 # font-face-constructor

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

@font-face