DasFontFace-Interface derCSS 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 wiestyle,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 neuesFontFace-Objekt zurück, das aus einer von einer URL beschriebenen externen Ressource oder aus einemArrayBuffer aufgebaut ist.

Instanz-Eigenschaften

FontFace.ascentOverride

Ein String, der dasAscent-Metrik der Schrift abruft oder festlegt. Es entspricht demascent-override Deskriptor.

FontFace.descentOverride

Ein String, der dasDescent-Metrik der Schrift abruft oder festlegt. Es entspricht demdescent-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 dieFamilie der Schrift abruft oder festlegt. Es entspricht demfont-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 dieZeilenabstand-Metrik der Schrift abruft oder festlegt. Es entspricht demline-gap-override Deskriptor.

FontFace.loadedSchreibgeschützt

Gibt einPromise zurück, das mit dem aktuellenFontFace-Objekt aufgelöst wird, wenn die Schriftart, die im Konstruktor des Objekts angegeben ist, vollständig geladen ist, oder mit einemSyntaxErrorDOMException zurückgewiesen wird.

FontFace.statusSchreibgeschü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 Schriftgestreckt wird. Es entspricht demfont-stretch Deskriptor.

FontFace.style

Ein String, der denStil der Schrift abruft oder festlegt. Es entspricht demfont-style Deskriptor.

FontFace.unicodeRange

Ein String, der denBereich der Unicode-Zeichen der Schrift abruft oder festlegt. Es entspricht demunicode-range Deskriptor.

FontFace.variantNicht standardisiert

Ein String, der dieVariante der Schrift abruft oder festlegt.

FontFace.variationSettings

Ein String, der dieVariationseinstellungen der Schrift abruft oder festlegt. Es entspricht demfont-variation-settings Deskriptor.

FontFace.weight

Ein String, der dasGewicht der Schrift enthält. Es entspricht demfont-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 einPromise 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 denstretch Deskriptor über eine Eigenschaft.

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

Als Nächstes laden wir die Schriftart mitFontFace.load() und verwenden das zurückgegebene Promise, um den Abschluss zu verfolgen oder einen Fehler zu melden.

// Load the fontfont.load().then(  () => {    // Resolved - add font to document.fonts  },  (err) => {    console.error(err);  },);

Um die Schrift tatsächlich zuverwenden, müssen wir sie einemFontFaceSet hinzufügen.Wir könnten das vor oder nach dem Laden der Schrift tun.

Für weitere Beispiele sieheCSS Font Loading API > Examples.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @font-face