FontFace: Methode load()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die load()
-Methode der FontFace
-Schnittstelle fordert eine Schriftart an und lädt sie, deren source
als URL angegeben wurde. Sie gibt ein Promise
zurück, das mit dem aktuellen FontFace
-Objekt aufgelöst wird.
Wenn die source
für die Schriftart als Binärdaten angegeben wurde oder die status
-Eigenschaft der Schriftart etwas anderes als unloaded
ist, tut diese Methode nichts.
Syntax
load()
Parameter
Keine.
Rückgabewert
Ein Promise
, das mit einer Referenz auf das aktuelle FontFace
-Objekt aufgelöst wird, wenn die Schriftart geladen wird, oder mit einem NetworkError
-DOMException
abgelehnt wird, wenn der Ladevorgang fehlschlägt.
Ausnahmen
NetworkError
DOMException
-
Gibt an, dass der Versuch, die Schriftart zu laden, fehlgeschlagen ist.
Beispiele
Dieses einfache Beispiel lädt eine Schriftart und verwendet sie, um Text in einem Canvas-Element (mit der id js-canvas
) anzuzeigen.
const canvas = document.getElementById("js-canvas");
// load the "Bitter" font from Google Fonts
const fontFile = new FontFace(
"FontFamily Style Bitter",
"url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(fontFile);
fontFile.load().then(
() => {
// font loaded successfully!
canvas.width = 650;
canvas.height = 100;
const ctx = canvas.getContext("2d");
ctx.font = '36px "FontFamily Style Bitter"';
ctx.fillText("Bitter font loaded", 20, 50);
},
(err) => {
console.error(err);
},
);
Spezifikationen
Specification |
---|
CSS Font Loading Module Level 3 # font-face-load |
Browser-Kompatibilität
BCD tables only load in the browser