浏览器静默跳过非系统字体加载时，典型表现为文字显示为宋体/微软雅黑、Network无请求、控制台无报错；主因是file://协议限制、MIME类型未配置或路径含空格/中文。
浏览器不加载非系统字体时的典型表现
页面里用了 @font-face 引入的字体，但文字却显示成宋体/微软雅黑——不是字体文件没传，而是浏览器根本没尝试加载。常见现象包括：font-family 声明生效了，computed style 里也显示该字体名，但 Network 面板完全看不到字体请求，控制台也没有报错。
根本原因通常是字体文件路径错误、MIME 类型未配置、或跨域策略拦截。尤其在本地双击打开 HTML 文件（file:// 协议）时，Chrome 和 Edge 会直接拒绝加载 woff2 等字体，连预检都不发。
- 用
file://打开页面 → 浏览器静默跳过字体加载（无警告、无日志） - 服务器未配置
font/woff2MIME 类型 → 返回 404 或 406，但部分浏览器不报错，只回退到系统字体 -
@font-face中src的 URL 路径含空格或中文 → 解析失败，加载中断
如何让浏览器明确提示“字体加载失败”而不是静默回退
浏览器默认不会主动弹窗或打印警告，但你可以通过 document.fonts.load() 主动探测，并结合 catch 捕获失败。这是唯一能拿到“字体不可用”信号的可靠方式。
注意：document.fonts.load() 不是检查文件是否存在，而是检查该字体是否**已加载并可渲染**；它返回 Promise，失败仅发生在加载完成但字体无效（如格式损坏、跨域拒绝、解析失败）时。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
document.fonts.load('12px "MyCustomFont"').then(() => { console.log('字体可用'); }).catch(() => { console.warn('字体加载失败，将降级显示'); document.body.classList.add('font-fallback'); }); - 必须等
<link>或@font-face已声明，且 DOM 就绪后再调用，否则 Promise 立即 resolve（误判为成功） - 不要对每个字体单独调用——批量合并：
document.fonts.load('12px "A", 12px "B", 12px "C"')
导出字体时 Web 兼容性最常踩的三个坑
设计师给的 OTF/TTF 直接丢进网页？大概率出问题。Web 字体不是“能打开就行”，得过三关：格式、子集、授权。
- 别用
.otf或未压缩的.ttf→ 必须转成.woff2（现代浏览器）+.woff（兼容旧版），工具推荐fonttools或在线的transfonter.org - 不裁剪字形 → 全量字体可能超 2MB，首屏阻塞严重；用
pyftsubset按需提取中文常用字（如 GB2312 或 3500 基础汉字），避免“导出全部” - 忽略字体许可证 → 很多商用字体（如思源黑体以外的）禁止 Web Embedding，即使技术上跑通，法律风险仍在；优先选 SIL Open Font License 或 Apache 2.0 授权的字体
CSS fallback 链怎么写才真正有效
font-family: "MyFont", "PingFang SC", "Microsoft YaHei", sans-serif; 这种写法看似稳妥，实则陷阱不少：Mac 上 "PingFang SC" 可能被跳过，Windows 下 "Microsoft YaHei" 在某些语言区域不存在，sans-serif 在 Linux 上可能是 DejaVu Sans，和设计稿偏差极大。
真正可控的方式是分层降级 + 显式指定字号/行高，而非依赖系统猜测：
- 中文字体链建议按平台硬写：
"MyFont", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif - 英文部分单独加一层：比如
font-family: "MyFont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - 关键页面（如标题）可配合
@supports (font-technology(family-name))做特性检测，但目前仅 Safari 支持，慎用
