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.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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

Dieses Interface definiert die Quelle einer Schriftart, entweder eine URL zu einer externen Ressource oder ein Puffer, sowie Schrifteigenschaften wie style, weight usw. Für URL-Schriftquellen ermöglicht es Autoren, zu steuern, wann die entfernte Schriftart abgerufen und geladen wird, und den Ladezustand nachzuverfolgen.

Konstruktor

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

Instanzeigenschaften

FontFace.ascentOverride: Ein String, der die Ascent-Metrik der Schriftart abruft oder festlegt. Es ist äquivalent zum ascent-override-Deskriptor.
FontFace.descentOverride: Ein String, der die Descent-Metrik der Schriftart abruft oder festlegt. Es ist äquivalent zum descent-override-Deskriptor.
FontFace.display: Ein String, der bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen und verwendet werden kann.
FontFace.family: Ein String, der die Familie der Schriftart abruft oder festlegt. Es ist äquivalent zum font-family-Deskriptor.
FontFace.featureSettings: Ein String, der selten verwendete Schriftmerkmale abruft oder festlegt, die nicht über die Varianten-Eigenschaften einer Schrift verfügbar sind. Es ist äquivalent zur CSS-Eigenschaft font-feature-settings.
FontFace.lineGapOverride: Ein String, der die Zeilenabstand-Metrik der Schriftart abruft oder festlegt. Es ist äquivalent zum line-gap-override-Deskriptor.
FontFace.loaded Schreibgeschützt: Gibt ein Promise zurück, das aufgelöst wird, wenn die in der Konstruktor-Methode des Objekts angegebene Schriftart geladen ist, oder mit einem SyntaxError-DOMException abgelehnt wird.
FontFace.status Schreibgeschützt: Gibt einen enumerierten Wert zurück, der den Status der Schriftart angibt, einer von "unloaded", "loading", "loaded" oder "error".
FontFace.stretch: Ein String, der abruft oder festlegt, wie die Schriftart gestreckt wird. Es ist äquivalent zum font-stretch-Deskriptor.
FontFace.style: Ein String, der den Stil der Schriftart abruft oder festlegt. Es ist äquivalent zum font-style-Deskriptor.
FontFace.unicodeRange: Ein String, der den Bereich der Unicode-Codepunkte abruft oder festlegt, der die Schrift umfasst. Es ist äquivalent zum unicode-range-Deskriptor.
FontFace.variant Nicht standardisiert: Ein String, der die Variante der Schriftart abruft oder festlegt.
FontFace.variationSettings Experimentell: Ein String, der die Einstellung der Variationen der Schrift abruft oder festlegt. Es ist äquivalent zum font-variation-settings-Deskriptor.
FontFace.weight: Ein String, der das Gewicht der Schriftart enthält. Es ist äquivalent zum font-weight-Deskriptor.
FontFace.load(): Lädt eine Schriftart basierend auf den im Konstruktor des aktuellen Objekts übergebenen Anforderungen, einschließlich eines Speicherorts oder Quellpuffers, 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 Schrift-Deskriptoren. Um zu zeigen, wie es funktioniert, weisen wir dann den stretch-Deskriptor durch eine Eigenschaft zu.

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

font.stretch = "condensed";

Anschließend laden wir die Schriftart mithilfe von FontFace.load() und verwenden das zurückgegebene Promise, um die Fertigstellung nachzuverfolgen 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 zu einer FontFaceSet hinzufügen. Dies könnte vor oder nach dem Laden der Schriftart geschehen.

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

Spezifikationen

Specification
CSS Font Loading Module Level 3 # fontface-interface

Browser-Kompatibilität

Siehe auch

@font-face