字体没生效？一套排查顺序
适合谁看：网页字体「好像没用上」「只有部分字变了」「变粗了」，想自己查原因的开发者。
文风网页字体的专门问答见《文风网页字体的专门问答见《开发常见问题》。本页是通用的排查顺序，自托管、第三方字体也适用。
1. 看渲染字体
Chrome 或 Edge：开发者工具 →「元素」→ 选中文字 →「计算样式」面板拉到底，看「渲染字体（Rendered Fonts）」。它列出这段文字实际用了哪些字体、各显示了多少个字。
Firefox：开发者工具 →「检查器」→「字体」面板，可以看到页面用到的字体和来源。
- 显示的是系统字体 → 网页字体没加载或名字没对上，继续往下查；
- 网页字体和系统字体各占一部分 → 缺字或分片没加载完，见第 4 步。
2. 看网络请求
「网络」面板筛选「字体」和「CSS」，刷新：
| 看到的情况 | 可能原因 |
|---|---|
| 没有任何字体请求 | font-family 名字和 @font-face 不一致；或页面上没有文字用到它 |
| 404 | 地址拼错，大小写不对，或子集不存在 |
| 请求被拦截，控制台有 CORS 报错 | 字体服务器没有返回允许跨域的响应头 |
| 200，但文件很小或类型不对 | 服务器返回了错误页面，打开地址看看内容 |
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. 清缓存再试
字体更新后，浏览器和服务器缓存可能还是旧文件。用无痕窗口或「停用缓存」再试一次。
参考资料
- Chrome DevTools：检查字体（英文）：https://developer.chrome.com/docs/devtools/css/reference#fonts
- Firefox：查看字体（英文）：https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_fonts/index.html
- MDN：FontFaceSet.check()：https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet/check