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 Schriftschnitt.

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

Konstruktor

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

Instanz-Eigenschaften

FontFace.ascentOverride: Ein String, der das ascent-Maß der Schriftart abruft oder festlegt. Es entspricht dem ascent-override-Deskriptor.
FontFace.descentOverride: Ein String, der das descent-Maß der Schriftart abruft oder festlegt. Es entspricht dem descent-override-Deskriptor.
FontFace.display: Ein String, der bestimmt, wie ein Schriftschnitt basierend darauf angezeigt wird, ob und wann er heruntergeladen und einsatzbereit ist.
FontFace.family: Ein String, der die Familie der Schriftart abruft oder festlegt. Es entspricht dem font-family-Deskriptor.
FontFace.featureSettings: Ein String, der selten genutzte Schriftarten-Features abruft oder festlegt, die nicht über die Varianteneigenschaften einer Schrift verfügbar sind. Es entspricht der CSS-Eigenschaft font-feature-settings.
FontFace.lineGapOverride: Ein String, der das line-gap-Maß der Schriftart 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 auflöst, wenn die im Konstruktor des Objekts angegebene Schriftart geladen wurde, oder bricht mit einem SyntaxError-DOMException ab.
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 Schriftart abruft oder festlegt. Es entspricht dem font-style-Deskriptor.
FontFace.unicodeRange: Ein String, der den Bereich der Unicode-Codepunkte umschließt, die die Schriftart umfassen. Es entspricht dem unicode-range-Deskriptor.
FontFace.variant Nicht standardisiert: Ein String, der die Variante der Schriftart abruft oder festlegt.
FontFace.variationSettings: Ein String, der die Variations-Einstellungen der Schriftart abruft oder festlegt. Es entspricht dem font-variation-settings-Deskriptor.
FontFace.weight: Ein String, der das Gewicht der Schriftart 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 Quellpuffers, und gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt auflöst.

Beispiele

Der untenstehende Code definiert eine Schriftart anhand von Daten unter der URL "my-font.woff" mit einigen Schriftart-Deskriptoren. Nur um zu zeigen, wie es funktioniert, definieren wir dann den stretch-Deskriptor mit 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 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 zu 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