FontFace

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die FontFace-Schnittstelle der CSS Font Loading API repräsentiert eine einzelne verwendbare Schriftart.

Diese Schnittstelle definiert die Quelle einer Schriftart – entweder eine URL zu einer externen Ressource oder einen Puffer – sowie Schrifteigenschaften wie style, weight und weitere. Bei URL-basierten Schriftquellen können Entwickler steuern, wann die entfernte Schriftart abgerufen und geladen wird, und den Ladestatus verfolgen.

Konstruktor

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

Instanzeigenschaften

FontFace.ascentOverride: Ein String, der die Aufstiegsmetrik der Schriftart abruft oder festlegt. Er entspricht dem Deskriptor ascent-override.
FontFace.descentOverride: Ein String, der die Abstiegsmetrik der Schriftart abruft oder festlegt. Er entspricht dem Deskriptor descent-override.
FontFace.display: Ein String, der bestimmt, wie eine Schriftart angezeigt wird – abhängig davon, ob und wann sie heruntergeladen wurde und einsatzbereit ist.
FontFace.family: Ein String, der die Schriftfamilie abruft oder festlegt. Er entspricht dem Deskriptor font-family.
FontFace.featureSettings: Ein String, der selten verwendete Schriftfunktionen abruft oder festlegt, die nicht über die Varianteneigenschaften einer Schriftart verfügbar sind. Er entspricht der CSS-Eigenschaft font-feature-settings.
FontFace.lineGapOverride: Ein String, der die Zeilenabstandsmetrik der Schriftart abruft oder festlegt. Er entspricht dem Deskriptor line-gap-override.
FontFace.loaded Schreibgeschützt: Gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt erfüllt wird, sobald die im Konstruktor des Objekts angegebene Schriftart vollständig geladen ist, oder mit einer SyntaxError-DOMException abgelehnt wird.
FontFace.sizeAdjust: Ein String, der einen Multiplikator für die Glyphenumrisse und Metriken der Schriftart abruft oder festlegt. Er entspricht dem Deskriptor size-adjust.
FontFace.status Schreibgeschützt: Gibt einen Aufzählungswert zurück, der den Status der Schriftart angibt: "unloaded", "loading", "loaded" oder "error".
FontFace.stretch: Ein String, der abruft oder festlegt, wie die Schriftart gestreckt wird. Er entspricht dem Deskriptor font-stretch.
FontFace.style: Ein String, der den Stil der Schriftart abruft oder festlegt. Er entspricht dem Deskriptor font-style.
FontFace.unicodeRange: Ein String, der den Bereich der Unicode-Codepunkte abruft oder festlegt, den die Schriftart umfasst. Er entspricht dem Deskriptor unicode-range.
FontFace.variant: Ein String, der die Variante der Schriftart abruft oder festlegt.
FontFace.variationSettings: Ein String, der die Variationseinstellungen der Schriftart abruft oder festlegt. Er entspricht dem Deskriptor font-variation-settings.
FontFace.weight: Ein String, der die Schriftstärke enthält. Er entspricht dem Deskriptor font-weight.
FontFace.load(): Lädt eine Schriftart anhand der Anforderungen, die dem Konstruktor des aktuellen Objekts übergeben wurden, einschließlich eines Speicherorts oder Quellpuffers. Die Methode gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt erfüllt wird.

Beispiele

Der folgende Code definiert eine Schriftart anhand der Daten unter der URL „my-font.woff“ und einiger Schriftdeskriptoren. Um die Funktionsweise zu veranschaulichen, definieren wir anschließend den Deskriptor stretch ü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 Schriftart tatsächlich zu verwenden, müssen wir sie einem FontFaceSet hinzufügen. Das können wir vor oder nach dem Laden der Schriftart tun.

Weitere Beispiele finden Sie unter CSS Font Loading API > Beispiele.

Spezifikationen

Spezifikation
CSS Font Loading Module Level 3 # fontface-interface

Browser-Kompatibilität

Siehe auch

@font-face

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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