FontFaceSet: check() 方法

FontFaceSet 的 check() 方法如果您可以使用给定的字体规范渲染一些文本而无需尝试使用此 FontFaceSet 中尚未完全加载的任何字体，则返回 true。这意味着您可以使用字体规范而不会导致 字体切换。

注意：check() 方法并非旨在验证是否可以渲染特定的字体样式或特定字体是否已完全加载。相反，如果使用给定的字体规范可以渲染指定的文本而不会导致字体切换，则它将返回 true。这意味着即使请求的字体不可用或未完全加载，该方法仍然可能返回 true。这种行为有助于避免与字体切换相关的视觉问题，但如果您试图确认特定字体的可用性，则可能与预期不符。

语法

js
check(font)
check(font, text)

参数

font

使用 CSS font 属性的语法表示的字体规范，例如 "italic bold 16px Roboto"

text

将字体面限制为其 Unicode 范围包含文本中至少一个字符的那些字体面。这 不会检查单个字形覆盖范围。

返回值

一个 Boolean 值，如果使用给定的字体规范渲染文本不会尝试使用此 FontFaceSet 中尚未完全加载的任何字体，则为 true。

这意味着此 FontFaceSet 中由给定字体规范匹配的所有字体都有一个设置为 "loaded" 的 status 属性。

否则，此函数将返回 false。

示例

在以下示例中，我们创建一个新的 FontFace 并将其添加到 FontFaceSet

js
const font = new FontFace(
  "molot",
  "url(https://interactive-examples.mdn.mozilla.net/media/fonts/molot.woff2)",
  {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  },
);

document.fonts.add(font);

未加载的字体

该字体尚未加载，因此 check("12px molot") 返回 false，表明如果我们尝试使用给定的字体规范，我们将触发字体加载

js
console.log(document.fonts.check("12px molot"));
// false: the matching font is in the set, but is not yet loaded

系统字体

如果我们在 check() 的参数中仅指定系统字体，它将返回 true，因为我们可以使用系统字体而无需从集合中加载任何字体

js
console.log(document.fonts.check("12px Courier"));
// true: the matching font is a system font

不存在的字体

如果我们指定一个不在 FontFaceSet 中且不是系统字体的字体，check() 将返回 true，因为在这种情况下，我们不会依赖集合中的任何字体

js
console.log(document.fonts.check("12px i-dont-exist"));
// true: the matching font is a nonexistent font

系统字体和未加载的字体

如果我们同时指定系统字体和集合中尚未加载的字体，则 check() 将返回 false

js
console.log(document.fonts.check("12px molot, Courier"));
// false: `molot` is in the set but not yet loaded

正在加载的字体

如果我们指定集合中仍在加载的字体，check() 将返回 false

js
function check() {
  font.load();
  console.log(document.fonts.check("12px molot"));
  // false: font is still loading
  console.log(font.status);
  // "loading"
}

check();

已加载的字体

如果我们指定集合中已加载的字体，check() 将返回 true

js
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

浏览器兼容性

BCD 表格仅在浏览器中加载