自定义字体加载异常需从路径、格式、策略、回退四环节系统解决：检查@font-face路径与network请求状态，配置正确mime类型和cors头，按woff2/woff/ttf顺序声明多格式，强制使用font-display: swap，并设置包含系统字体的稳健font-family栈。
自定义字体加载异常，本质是浏览器对字体资源的解析、请求和渲染逻辑不一致。解决不能靠“换一个woff文件”碰运气，而要从路径、格式、策略、回退四个环节系统处理。
确保字体文件可被正确请求
这是最基础也最容易出错的一环。很多问题其实不是字体本身，而是浏览器根本没拿到文件。
- 检查
@font-face中src路径是否准确——用开发者工具 Network 面板看字体请求是否返回 404 或 403 - 避免相对路径写错：比如 CSS 在
/css/style.css，字体在/fonts/xxx.woff2，那么url('../fonts/xxx.woff2')才对 - 确认服务器支持字体 MIME 类型：
.woff2 → application/font-woff2，.woff → application/font-woff；Nginx/Apache 需显式配置
覆盖跨域与格式兼容断点
字体托管在 CDN 或不同域名时，跨域限制和格式支持是两大硬门槛。
- 跨域字体必须带 CORS 响应头：
Access-Control-Allow-Origin: *（或指定域名），否则 Chrome/Firefox 直接拒绝解析 - 不要只提供一种格式：优先按顺序声明
woff2（现代浏览器）、woff（IE9+、旧安卓）、ttf（部分旧 Safari） - 避免依赖国外 CDN（如 Google Fonts 在国内不稳定），本地部署更可控
用 font-display: swap 控制渲染节奏
不加font-display，IE 和旧版 Safari 可能卡住文字，Chrome 可能闪白屏（FOIT），移动端可能等太久才显示。
- 强制在
@font-face中添加font-display: swap;，让浏览器立即用后备字体渲染，再静默替换 - 不要用
auto或block——前者行为不可控，后者在慢网下用户会长时间看不到文字 - 注意：
swap在 IE 中被忽略（IE 不支持该属性），但 IE 本就不支持 WOFF2，所以它自然回落到你声明的其他格式 + 后备字体
设置稳健的字体栈与系统回退
即使所有加载都失败，文字也必须可读。这不是“美化”，而是可用性底线。
- 中文优先组合：
"PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif - 英文兼顾老系统：
"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif - 避免只写自定义字体名，比如
font-family: "MyFont"——一旦加载失败，就变成浏览器默认字体（可能极小或极粗） - 移动端补充：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }，防 iOS Safari 自动缩放破坏字体布局
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
