FontFace: load() 方法
注意：此功能在 Web Workers 中可用。
FontFace 介面的 load() 方法請求並載入一個字型，該字型的 source 被指定為 URL。它返回一個 Promise，該 Promise 在解決時帶回當前的 FontFace 物件。
如果字型的 source 被指定為二進位制資料，或者字型的 status 屬性不是 unloaded，則此方法不執行任何操作。
語法
js
load()
引數
無。
返回值
當字型載入成功時，Promise 會使用對當前 FontFace 物件的引用解決；如果載入過程失敗，則會使用 NetworkError DOMException 拒絕。
異常
NetworkErrorDOMException-
表示嘗試載入字型失敗。
示例
這個簡單的例子載入了一個字型，並使用它在 canvas 元素（id 為 js-canvas）中顯示一些文字。
js
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);
},
);
規範
| 規範 |
|---|
| CSS 字型載入模組等級 3 # font-face-load |
瀏覽器相容性
載入中…