字体没生效？一套排查顺序

适合谁看：网页字体「好像没用上」「只有部分字变了」「变粗了」，想自己查原因的开发者。

文风网页字体的专门问答见《开发常见问题》。本页是通用的排查顺序，自托管、第三方字体也适用。

1. 看渲染字体

Chrome 或 Edge：开发者工具 →「元素」→ 选中文字 →「计算样式」面板拉到底，看「渲染字体（Rendered Fonts）」。它列出这段文字实际用了哪些字体、各显示了多少个字。

Firefox：开发者工具 →「检查器」→「字体」面板，可以看到页面用到的字体和来源。

• 显示的是系统字体 → 网页字体没加载或名字没对上，继续往下查；
• 网页字体和系统字体各占一部分 → 缺字或分片没加载完，见第 4 步。

2. 看网络请求

「网络」面板筛选「字体」和「CSS」，刷新：

3. 核对名字

font-family 里写的名字必须和 @font-face 里声明的完全一致（大小写、空格、连字符）。用第三方 CSS 时，打开 CSS 复制名字，不要凭印象写。

4. 部分字是别的字体

• 用了只含常用字或只含中文的子集，生僻字、西文落到了备用字体；
• 字体本身没有这个字，见《繁体、日文、生僻字显示成方框怎么办》；
• 分片还在下载，等一会儿就会换掉。

5. 字被人工加粗或拉斜

• 页面要求的字重或斜体，在 @font-face 里没有对应的声明，浏览器就自己合成；
• 不同字重起了不同的家族名，见《写对 @font-face：字体名、字重和 local()》。

6. 用控制台确认

在开发者工具的控制台里运行：

document.fonts.check('16px "字体名"')   // true 表示已可用
[...document.fonts].map(f => [f.family, f.weight, f.status])

7. 清缓存再试

字体更新后，浏览器和服务器缓存可能还是旧文件。用无痕窗口或「停用缓存」再试一次。

参考资料