FontFaceSet: check() 方法
注意：此功能在 Web Workers 中可用。
FontFaceSet 对象的 check() 方法会在您可以使用给定的字体描述来渲染文本，而无需尝试使用此 FontFaceSet 中尚未完全加载的任何字体时，返回 true。这意味着您可以使用该字体描述而不会引起 字体切换。
注意： check() 方法并非用于验证是否可以渲染特定的字体样式，或者特定字体是否已完全加载。相反，如果给定的字体描述所指定的文本无需引起字体切换即可渲染，则该方法返回 true。这意味着，即使请求的字体不可用或未完全加载，该方法仍可能返回 true。此行为有助于避免与字体切换相关的视觉问题，但如果您试图确认特定字体的可用性，可能会产生误导。
语法
check(font)
check(font, text)
参数
font-
使用 CSS
font属性语法的字体描述，例如"italic bold 16px Roboto" 文本-
将字体限制在 Unicode 范围至少包含文本中任一字符的字体。此操作 不会检查单个字形覆盖。
返回值
一个 Boolean 值。如果使用给定的字体描述渲染文本不会尝试使用此 FontFaceSet 中尚未完全加载的任何字体，则返回 true。
这意味着此 FontFaceSet 中与给定的字体描述匹配的所有字体，其 status 属性都设置为 "loaded"。
否则，该函数返回 false。
示例
在以下示例中，我们创建一个新的 FontFace 并将其添加到 FontFaceSet 中
const font = new FontFace("molot", 'url("/shared-assets/fonts/molot.woff2")', {
style: "normal",
weight: "400",
stretch: "condensed",
});
document.fonts.add(font);
未加载的字体
字体尚未加载，因此 check("12px molot") 返回 false，表明如果我们尝试使用给定的字体描述，我们将触发字体加载
console.log(document.fonts.check("12px molot"));
// false: the matching font is in the set, but is not yet loaded
系统字体
如果我们仅在 check() 的参数中指定系统字体，它将返回 true，因为我们可以使用系统字体而无需加载该集合中的任何字体
console.log(document.fonts.check("12px Courier"));
// true: the matching font is a system font
不存在的字体
如果我们指定一个不在 FontFaceSet 中也不是系统字体的字体，check() 返回 true，因为在这种情况下我们不会依赖该集合中的任何字体
console.log(document.fonts.check("12px i-dont-exist"));
// true: the matching font is a nonexistent font
系统字体和未加载的字体
如果我们同时指定一个系统字体和一个集合中尚未加载的字体，那么 check() 返回 false
console.log(document.fonts.check("12px molot, Courier"));
// false: `molot` is in the set but not yet loaded
正在加载的字体
如果我们指定了集合中仍在加载的字体，check() 返回 false
function check() {
font.load();
console.log(document.fonts.check("12px molot"));
// false: font is still loading
console.log(font.status);
// "loading"
}
check();
已加载的字体
如果我们指定了集合中已加载的字体，check() 返回 true
async function check() {
await font.load();
console.log(document.fonts.check("12px molot"));
// true: font has finished loading
console.log(font.status);
// "loaded"
}
check();
规范
| 规范 |
|---|
| CSS 字体加载模块等级 3 # dom-fontfaceset-check |
浏览器兼容性
加载中…