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 |
浏览器兼容性
加载中…