@font-face 使用需声明正确、路径准确、格式匹配、调用一致，且 font-family 名称须严格大小写与引号一致；src 路径以 CSS 文件为基准，推荐多格式 fallback；font-weight/font-style 需单独声明；加 font-display: swap 可缓解 FOIT/FOUT；务必通过 Network 面板验证字体是否成功加载。
@font-face 不是“加个链接就能用”，而是必须声明+路径正确+格式匹配+调用一致，缺一不可；否则浏览器直接跳过，文字照常回退到系统字体。
font-family 名字写错或没加引号
声明时 font-family: 'HarmonyOS Sans'，调用时却写 font-family: HarmonyOS Sans（没引号）或 font-family: 'harmonyos sans'（大小写不一致），浏览器就认不出。中文名、带空格、连字符的字体名，必须用英文单/双引号包裹；且大小写要和 @font-face 块里完全一致。
- ✅ 正确声明：
@font-face { font-family: 'Inter Variable'; src: url('./fonts/inter-var.woff2') format('woff2'); } - ✅ 正确调用：
body { font-family: 'Inter Variable', sans-serif; } - ❌ 错误调用：
font-family: Inter Variable;（无引号）、font-family: 'inter variable';（小写）
src 路径错误或格式 fallback 顺序不合理
路径是以 CSS 文件为基准的相对路径，不是 HTML 文件或服务器根目录。比如 CSS 在 /css/style.css，字体在 /fonts/inter.woff2，那就要写 url('../fonts/inter.woff2')。另外，只放一个 .ttf 文件，Safari 和旧 Android 会静默失败——它不支持直接加载未压缩的 TTF。
- ✅ 推荐写法：
src: url('./fonts/inter.woff2') format('woff2'), url('./fonts/inter.woff') format('woff'), url('./fonts/inter.ttf') format('truetype'); - ❌ 危险写法：
src: url('/fonts/inter.ttf');（绝对路径易跨域）、src: url('inter.ttf');（路径相对于当前页面，非 CSS） - ⚠️ 注意：
format('truetype')对应.ttf，format('opentype')对应.otf，写错 format 类型也会让部分浏览器拒绝加载
font-weight 或 font-style 不匹配导致回退
你声明了一个 font-weight: 400 的常规体，但 HTML 里某个 <strong></strong> 默认是 font-weight: bold（即 700），而你没提供对应粗体的 @font-face 块——浏览器不会“加粗”那个常规体，而是直接切到 sans-serif 回退字体。
立即学习“前端免费学习笔记（深入）”；
- 需要粗体？单独写一个块：
@font-face { font-family: 'MyFont'; font-weight: 700; src: url('./fonts/myfont-bold.woff2') format('woff2'); } - 需要斜体？也得单独声明：
@font-face { font-family: 'MyFont'; font-style: italic; src: url('./fonts/myfont-italic.woff2') format('woff2'); } - 别指望一个 @font-face 块覆盖所有 weight/style 组合；浏览器严格按声明匹配
字体加载完成前文字不可见（FOIT）或闪动（FOUT）
默认情况下，浏览器会等字体下载完才渲染文字（FOIT），造成空白卡顿；或者先用系统字体渲染，等自定义字体加载完再替换（FOUT），造成闪动。这不是 bug，是默认行为。
- 加
font-display: swap;是最简单有效的缓解方式，它让浏览器立即用回退字体渲染，等自定义字体就绪后无缝替换 - 别漏掉它：
@font-face { font-family: 'MyFont'; src: url('./fonts/myfont.woff2'); font-display: swap; } - 如果字体文件本身大（>100KB）或网络差，swap 也不能消除延迟，这时要考虑拆子集（
unicode-range）或换更轻量字体
最容易被忽略的是：字体文件是否真的被请求了。打开 DevTools → Network → Filter “Font”，看有没有 404 或 CORS error；有就立刻修路径或配 header。别猜，直接看 Network 面板——那是唯一能确认字体是否真正抵达浏览器的地方。
