FontFace

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.

Das FontFace-Interface der CSS Font Loading API repräsentiert eine einzelne nutzbare Schriftart.

Dieses Interface definiert die Quelle einer Schriftart, entweder eine URL zu einer externen Ressource oder ein Puffer, sowie Schrifteigenschaften wie style, weight und so weiter. Für URL-Schriftquellen ermöglicht es Autoren, den Zeitpunkt des Abrufs und Ladens der entfernten Schrift auszulösen und den Ladezustand zu verfolgen.

Konstruktor

FontFace(): Konstruiert und gibt ein neues FontFace-Objekt zurück, das aus einer externen Ressource, die durch eine URL beschrieben wird, oder aus einem ArrayBuffer erstellt wurde.

Instanzeigenschaften

FontFace.ascentOverride: Ein String, der die Aufstiegsmetrik der Schrift abruft oder festlegt. Es ist äquivalent zu dem ascent-override Deskriptor.
FontFace.descentOverride: Ein String, der die Abstiegsmetrik der Schrift abruft oder festlegt. Es ist äquivalent zu dem descent-override Deskriptor.
FontFace.display: Ein String, der bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen und einsatzbereit ist.
FontFace.family: Ein String, der die Familie der Schrift abruft oder festlegt. Es ist äquivalent zu dem font-family Deskriptor.
FontFace.featureSettings: Ein String, der selten verwendete Schriftmerkmale abruft oder festlegt, die von den Varianten-Eigenschaften einer Schrift nicht verfügbar sind. Es ist äquivalent zur CSS font-feature-settings Eigenschaft.
FontFace.lineGapOverride: Ein String, der die Zeilenabstandsmessung der Schrift abruft oder festlegt. Es ist äquivalent zu dem line-gap-override Deskriptor.
FontFace.loaded Nur lesbar: Gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt aufgelöst wird, wenn die im Konstruktor des Objekts angegebene Schriftart fertig geladen ist, oder mit einem SyntaxError-DOMException abgelehnt wird.
FontFace.status Nur lesbar: Gibt einen enumerierten Wert zurück, der den Status der Schrift angibt, einer von "unloaded", "loading", "loaded" oder "error".
FontFace.stretch: Ein String, der abruft oder festlegt, wie die Schrift gestreckt wird. Es ist äquivalent zu dem font-stretch Deskriptor.
FontFace.style: Ein String, der den Stil der Schrift abruft oder festlegt. Es ist äquivalent zu dem font-style Deskriptor.
FontFace.unicodeRange: Ein String, der den Bereich der Unicode-Codepunkte abruft oder festlegt, die die Schrift umfasst. Es ist äquivalent zu dem unicode-range Deskriptor.
FontFace.variant Nicht standardisiert: Ein String, der die Variante der Schrift abruft oder festlegt.
FontFace.variationSettings Experimentell: Ein String, der die Variationseinstellungen der Schrift abruft oder festlegt. Es ist äquivalent zu dem font-variation-settings Deskriptor.
FontFace.weight: Ein String, der das Gewicht der Schrift enthält. Es ist äquivalent zu dem font-weight Deskriptor.
FontFace.load(): Lädt eine Schriftart basierend auf den Anforderungen des gegenwärtigen Konstruktor-Objekts, einschließlich eines Standort- oder Quellenpuffers, und gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt aufgelöst wird.

Beispiele

Der untenstehende Code definiert eine Schriftart mit Daten von der URL "my-font.woff" mit einigen Schriftdeskriptoren. Um zu zeigen, wie es funktioniert, definieren wir dann den stretch-Deskriptor mithilfe einer Eigenschaft.

//Define a FontFace
const font = new FontFace("my-font", "url(my-font.woff)", {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";

Als nächstes laden wir die Schriftart mit FontFace.load() und verwenden das zurückgegebene Promise, um den Abschluss zu verfolgen oder einen Fehler zu melden.

//Load the font
font.load().then(
  () => {
    // Resolved - add font to document.fonts
  },
  (err) => {
    console.error(err);
  },
);

Um die Schrift tatsächlich zu verwenden, müssen wir sie einem FontFaceSet hinzufügen. Dies könnten wir vor oder nach dem Laden der Schrift tun.

Für weitere Beispiele siehe CSS Font Loading API > Examples.

Spezifikationen

Specification
CSS Font Loading Module Level 3 # fontface-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

@font-face