FontFace: load()-Methode
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.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die load()-Methode der FontFace-Schnittstelle fordert eine Schriftart an, deren source als URL angegeben wurde, und lädt sie. Sie gibt ein Promise zurück, das mit dem aktuellen FontFace-Objekt erfüllt wird.
Wenn source für die Schriftart als Binärdaten angegeben wurde oder die status-Eigenschaft der Schriftart einen anderen Wert als unloaded hat, bewirkt diese Methode nichts.
Syntax
load()
Parameter
Keine.
Rückgabewert
Ein Promise, das beim Laden der Schriftart mit einer Referenz auf das aktuelle FontFace-Objekt erfüllt oder bei einem Fehlschlag des Ladevorgangs mit einer NetworkError-DOMException abgelehnt wird.
Ausnahmen
NetworkError-DOMException-
Zeigt 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://mdn.github.io/shared-assets/fonts/bitter/Bitter-Regular.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
| Spezifikation |
|---|
| CSS Font Loading Module Level 3 # font-face-load |