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 ein einzelnes nutzbares Schriftbild.

Dieses Interface definiert die Quelle eines Schriftbildes, entweder eine URL zu einer externen Ressource oder ein Puffer, sowie Schrifteigenschaften wie style, weight und so weiter. Bei URL-Schriftquellen ermöglicht es Autoren, festzulegen, wann die entfernte Schrift abgerufen und geladen wird, und den Ladezustand zu verfolgen.

Konstruktor

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

Instanzeigenschaften

FontFace.ascentOverride: Ein String, der die Ascent-Metrik der Schrift abruft oder festlegt. Es entspricht dem ascent-override Deskriptor.
FontFace.descentOverride: Ein String, der die Descent-Metrik der Schrift abruft oder festlegt. Es entspricht dem descent-override Deskriptor.
FontFace.display: Ein String, der bestimmt, wie ein Schriftbild basierend darauf angezeigt wird, ob und wann es heruntergeladen und bereit zur Verwendung 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 verwendete Schriftmerkmale abruft oder festlegt, die aus den Varianten-Eigenschaften einer Schrift nicht verfügbar sind. Es entspricht der CSS-Eigenschaft font-feature-settings.
FontFace.lineGapOverride: Ein String, der die Line-Gap-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 in dem Objekt angegebene Schrift geladen ist, oder mit einem SyntaxError DOMException abgelehnt wird.
FontFace.status Schreibgeschützt: 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 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-Codepunkte abruft oder festlegt, die die Schrift umfassen. 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 Schrift basierend auf den im Konstruktor des aktuellen Objekts übergebenen Anforderungen, einschließlich eines Standorts oder Quellpuffers, und gibt ein Promise zurück, das mit dem aktuellen FontFace Objekt aufgelöst wird.

Beispiele

Der untenstehende Code definiert ein Schriftbild unter Verwendung der Daten der URL "my-font.woff" mit einigen Schriftbezeichnern. Um zu zeigen, wie es funktioniert, definieren wir dann den stretch Bezeichner 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 Schrift mit FontFace.load() und verwenden das zurückgegebene Versprechen, um die Fertigstellung 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 zu einem FontFaceSet hinzufügen. Wir könnten dies vor oder nach dem Laden der Schrift tun.

Für zusätzliche Beispiele siehe CSS Font Loading API > Beispiele.

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