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 |
瀏覽器相容性
載入中…