JavaScript document.fonts.check 为什么不等于指定字体已下载

JavaScript 的 document.fonts.check() 返回 true，只说明当前字体规格可以在“不尝试使用尚未完全加载的字体”的前提下渲染，不等于浏览器已经下载了你点名的字体文件。最常见的原因是浏览器可以用系统字体或回退字体完成渲染，或者目标字体根本没有进入当前 FontFaceSet。

排查时把结果拆成三项记录：check() 的布尔值、具体 FontFace.status，以及显式加载 Promise 是否成功。三项一起看，比单独看一个布尔值可靠。

先确认 check 检查的到底是什么

check() 接收 CSS font 属性格式，例如 400 16px "Brand Sans"。它关注的是这组字体在当前文本下能否避免使用尚未完全加载的字体，不负责证明远端文件已经发起请求，也不负责验证每个字符都有对应字形。

因此，document.fonts.check("16px Brand Sans") 为真并不矛盾：如果 Brand Sans 没有被当前文档的字体集合管理，浏览器仍可能用后备字体完成排版。

用显式加载把“可用”变成可观察状态

如果页面已经通过 @font-face 声明字体，可先用 document.fonts.load() 触发并等待匹配字体：

async function loadBrandFont() {
  const fontSpec = '400 16px "Brand Sans"';
  const sample = '订单编号 ABC-2026'; // 用页面真实会出现的字符触发匹配

  try {
    const loadedFaces = await document.fonts.load(fontSpec, sample);
    const checkResult = document.fonts.check(fontSpec, sample);

    console.table({
      loadedCount: loadedFaces.length, // 返回本次匹配到的已加载 FontFace 数量
      checkResult,
      setStatus: document.fonts.status,
    });
    return checkResult && loadedFaces.length > 0;
  } catch (error) {
    console.error('字体加载失败', error); // 处理网络、格式或跨域导致的 rejected Promise
    return false;
  }
}

loadBrandFont();

这里的 loadedFaces.length 是重要补充：如果没有匹配到由文档字体集合管理的自定义字体，单看 checkResult 仍可能得到误导性的 true。若字体由 JavaScript 创建，则应保留那个 FontFace 对象并检查它的状态：

const face = new FontFace(
  'Brand Sans',
  'url(/fonts/brand-sans.woff2)',
  { weight: '400', style: 'normal' },
);
document.fonts.add(face); // 先加入集合，浏览器才会按文档字体规则使用它

try {
  await face.load();
  console.log(face.status); // loaded：字体数据已成功获取并加载
} catch (error) {
  console.error('FontFace.load 失败', error); // failed：不要把回退字体当成成功
}

字符样本和字体状态要同时核对

check(font, text) 的第二个参数只用于按 Unicode 范围筛选字体，不会替你逐个确认字符串中的字形覆盖。中文、扩展拉丁字母和符号混排时，建议把真实文案作为样本，并额外检查最终渲染结果。

async function verifyTextFont(text) {
  const spec = '400 16px "Brand Sans"';
  const faces = await document.fonts.load(spec, text);
  const allLoaded = faces.length > 0 && faces.every((item) => item.status === 'loaded');

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = spec; // 先设置目标字体，再测量真实文本
  const targetWidth = ctx.measureText(text).width;

  return {
    allLoaded,
    check: document.fonts.check(spec, text),
    width: targetWidth, // 只能作为回归指标，不能单独证明字形来源
  };
}

宽度只能作为回归信号，不能当作字体指纹。更稳妥的做法是准备一组已知字符样本，分别记录加载 Promise、FontFace.status 和页面关键文本的视觉回归结果。需要知道网络请求是否出现时，再配合浏览器开发者工具或 Resource Timing 观察，而不是把 check() 当网络面板。

这几个边界最容易造成误判

• 回退字体成功：字体名拼写错误、字体未加入集合或字体加载失败时，排版仍可能完成。
• 缓存不等于当前 FontFace 已加载：浏览器可能命中缓存，但具体字体实例仍要经过解析和加载。
• 声明不等于使用：document.fonts.ready 关注页面已使用字体与布局完成，不承诺每个声明过的字体都已下载。
• 多个变体要分别验证：weight、style、stretch 和 Unicode 范围不同，不能用一个 400 正常就推断 700 也可用。
• 跨域和字体格式会失败：服务器响应头、URL、字体文件格式都可能让 load() 进入 rejected 或 failed。

最终可以把上线检查写成四列：字体规格、真实字符样本、load() 结果、FontFace.status。只有显式加载成功且目标变体状态为 loaded 时，才把它记为“目标字体已准备好”；check() === true 只作为“不需要未完成字体即可渲染”的辅助信号。

相关问题

为什么 font-display: optional 时 check 仍可能为 true？因为浏览器可以选择继续使用回退字体，页面实际使用的字体集合与 CSS 声明集合并不必然相同。

只调用 document.fonts.load 就够了吗？不够。还要检查 Promise 是否 rejected、返回的 FontFace 数量和具体状态；对于多语言文本，还要用真实字符样本做回归。