字体加载失败主因是路径错误、MIME类型配置缺失或字体格式/编码不兼容，需通过Network面板查404/406、验证字符支持、统一font-family与PostScript名，并合理设置font-display。
字体文件路径错误导致 @font-face 加载失败
浏览器无法加载字体文件时，会回退到系统默认字体（如 Times New Roman 或 SimSun），造成“字体异常”的直观感受。关键不是样式没生效，而是 @font-face 根本没加载成功。
常见问题包括：
-
src: url('./fonts/iconfont.woff2')中的路径是相对路径，但 CSS 文件实际被内联或通过 CDN 引入，导致路径解析上下文错乱 - 字体文件放在
public/下却用了src: url('/assets/fonts/xxx.woff2')，而真实访问路径是/fonts/xxx.woff2 - 开发服务器（如 Vite、Webpack Dev Server）默认不托管
.woff2等字体后缀，需显式配置 MIME 类型或静态资源规则
验证方式：打开浏览器开发者工具 → Network 标签页 → 筛选 Font → 查看对应字体请求是否 404 或 406；若状态码为 404，优先检查路径；若为 406，说明服务器拒绝了该 MIME 类型。
字体文件编码或格式不兼容引发渲染异常
字体异常未必是“没加载”，也可能是“加载了但用不了”。比如使用了仅含 ASCII 字符集的英文字体去渲染中文，或字体本身未嵌入 Unicode BMP 外字符（如 emoji、生僻汉字），浏览器会静默降级。
立即学习“前端免费学习笔记（深入）”；
排查要点：
- 用
font-display: swap配合font-family回退链，确认是否因字体加载延迟导致闪动误判为异常：font-family: 'MyFont', 'PingFang SC', 'Microsoft YaHei', sans-serif; - 检查字体文件是否真包含目标字符：用系统字体预览工具（macOS 字体册 / Windows 字体查看器）打开 .ttf/.woff2，搜索中文字符看是否支持
- 某些旧版 iOS Safari 对
woff2支持不稳定，可补一个woff格式兜底：src: url('font.woff2') format('woff2'), url('font.woff') format('woff');
CSS 字体族名（font-family）声明与字体文件内部 PostScript 名不一致
@font-face 中的 font-family 是自定义别名，必须和后续 CSS 中使用的名称完全一致（区分大小写），且不能包含空格或特殊符号（除非加引号）。但更隐蔽的问题是：字体文件自身元数据里的 PostScript Name 和你期望的匹配逻辑冲突。
例如：
font-face {
font-family: 'MiSans';
src: url('MiSans-Regular.woff2') format('woff2');
}
如果该字体文件实际内置的 PostScript Name 是 MiSans-Regular，而你在 Chrome 中用 getComputedStyle(el).fontFamily 查到的是 "MiSans-Regular"（而非 "MiSans"），说明浏览器按内部名做了映射，此时若其他地方写了 font-family: 'MiSans'; 可能不命中。
解决方法：
- 用
font-display: optional+ 控制台执行document.fonts.check('12px "MiSans"')主动检测是否就绪 - 用 FontFaceObserver 监听加载完成，避免在字体未就绪时读取
computedStyle - 重命名字体文件并用工具（如 fonttools）修改其
name表，确保font-family声明与内部一致
字体加载期间未设置 font-display 导致布局抖动或空白
没有 font-display 的 @font-face 在多数浏览器中默认行为是“阻塞 3s，交换 3s，失败则用回退字体”——这期间文本可能不可见或突然跳变，用户感知为“字体异常”。
推荐策略：
- 对品牌字体/标题字体：用
font-display: swap，保证内容立即可见 - 对图标字体（如 iconfont）：用
font-display: optional，避免加载延迟影响图标渲染 - 禁用
font-display: block除非有强一致性要求，它会导致长达 3s 的文本不可见
注意：font-display 不解决路径或编码问题，但它会让“异常”表现得更可控、更可调试——把字体问题从“看不见”变成“看得见但不对”，这是排查的第一步。
真正棘手的往往是字体文件本身损坏、子集化遗漏字符、或构建工具（如 Webpack 的 file-loader）意外重命名了字体文件却没同步更新 CSS 中的引用路径——这些不会报错，只会在特定文字上静默失效。
