FontFace

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 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 einen einzelnen verwendbaren Font-Face.

Dieses Interface definiert die Quelle eines Font-Face, entweder eine URL zu einer externen Ressource oder ein Puffer, sowie Font-Eigenschaften wie style, weight und andere. Bei URL-Font-Quellen ermöglicht es Autoren, den Zeitpunkt des Abrufs und Ladens der entfernten Schriftart auszulösen und den Ladefortschritt zu verfolgen.

Konstruktor

FontFace(): Konstruiert und gibt ein neues FontFace-Objekt zurück, das aus einer von einer URL beschriebenen externen Ressource oder aus einem ArrayBuffer aufgebaut ist.

Instanz-Eigenschaften

FontFace.ascentOverride: Ein String, der das Ascent-Metrik der Schrift abruft oder festlegt. Es entspricht dem ascent-override Deskriptor.
FontFace.descentOverride: Ein String, der das Descent-Metrik der Schrift abruft oder festlegt. Es entspricht dem descent-override Deskriptor.
FontFace.display: Ein String, der bestimmt, wie ein Font-Face angezeigt wird, basierend darauf, ob und wann es heruntergeladen und gebrauchsfertig ist.
FontFace.family: Ein String, der die Familie der Schrift abruft oder festlegt. Es entspricht dem font-family Deskriptor.
FontFace.featureSettings: Ein String, der selten genutzte Schrifteigenschaften abruft oder festlegt, die nicht aus den Varianteigenschaften einer Schrift verfügbar sind. Es entspricht der CSS-font-feature-settings Eigenschaft.
FontFace.lineGapOverride: Ein String, der die Zeilenabstand-Metrik der Schrift abruft oder festlegt. Es entspricht dem line-gap-override Deskriptor.
FontFace.loaded Schreibgeschützt: Gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt aufgelöst wird, wenn die Schriftart, die im Konstruktor des Objekts angegeben ist, vollständig geladen ist, oder mit einem SyntaxError DOMException zurückgewiesen 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 Schrift gestreckt wird. Es entspricht dem font-stretch Deskriptor.
FontFace.style: Ein String, der den Stil der Schrift abruft oder festlegt. Es entspricht dem font-style Deskriptor.
FontFace.unicodeRange: Ein String, der den Bereich der Unicode-Zeichen der Schrift abruft oder festlegt. Es entspricht dem unicode-range Deskriptor.
FontFace.variant Nicht standardisiert: Ein String, der die Variante der Schrift abruft oder festlegt.
FontFace.variationSettings: Ein String, der die Variationseinstellungen der Schrift abruft oder festlegt. Es entspricht dem font-variation-settings Deskriptor.
FontFace.weight: Ein String, der das Gewicht der Schrift enthält. Es entspricht dem font-weight Deskriptor.
FontFace.load(): Lädt eine Schriftart basierend auf den im Konstruktor des aktuellen Objekts übergebenen Anforderungen, einschließlich eines Standorts oder eines Quellpuffers, und gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt aufgelöst wird.

Beispiele

Der folgende Code definiert ein Font-Face unter Verwendung von Daten der URL "my-font.woff" mit einigen Schrift-Deskriptoren. Um zu zeigen, wie es funktioniert, definieren wir dann den stretch Deskriptor über eine 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. Wir könnten das 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

Siehe auch

@font-face

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden