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: Diese Funktion ist in Web Workers verfügbar.

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 zum Abgleichen mit diesem font-face verwendet werden kann, wenn Elemente gestylt werden.

Er nimmt dieselben Werte 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 Schriftdatei.
Binäre font-face-Daten in einem ArrayBuffer oder einem TypedArray.

descriptors Optional

Eine Reihe von optionalen Deskriptoren, die als ein 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 Deskriptorzeichenkette nicht der Grammatik des entsprechenden @font-face-Deskriptors entspricht oder die angegebene binäre Quelle 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

Siehe auch

@font-face