FontFace: load()-Methode
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.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die load()-Methode des FontFace-Interfaces 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 erfüllt wird.
Wenn die source für die Schriftart als Binärdaten angegeben wurde oder die status-Eigenschaft der Schriftart etwas anderes als unloaded ist, dann tut diese Methode nichts.
Syntax
load()
Parameter
Keine.
Rückgabewert
Ein Promise, das bei erfolgreichem Laden der Schriftart auf das aktuelle FontFace-Objekt verweist, oder mit einem NetworkError-DOMException abgelehnt wird, wenn der Ladevorgang fehlschlägt.
Ausnahmen
NetworkErrorDOMException-
Zeigt an, dass der Versuch, die Schriftart zu laden, fehlgeschlagen ist.
Beispiele
Dieses einfache Beispiel lädt eine Schriftart und verwendet sie, um einige Texte 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
Loading…