字体路径错误和 font-display 缺失是 @font-face 失效主因；路径须相对 CSS 文件，优先用 link 引入字体，声明 woff2/woff 双格式并添加 font-display: swap 避免文字闪动。
字体文件路径写错导致 @font-face 完全不生效
浏览器对 @font-face 的路径解析是相对于 CSS 文件位置的，不是 HTML 页面，也不是当前 URL。很多人把字体放在 ./fonts/ 下，却在 CSS 里写 url('/fonts/inter.woff2')（带根路径），结果 404。
- 用相对路径：如果 CSS 在
css/style.css，字体在fonts/inter.woff2，就写url('../fonts/inter.woff2') - 用开发者工具 Network 面板直接看请求地址和状态码，比猜快得多
- 不要依赖本地双击打开 HTML 的行为——此时协议是
file://，多数浏览器会拦截@font-face加载
WOFF2 和 WOFF 混用时的兼容性取舍
woff2 压缩率高、加载快，但 IE 完全不支持；woff 能覆盖 IE9+，体积稍大。只写一种格式等于主动放弃部分用户。
- 按顺序声明：先写
woff2，再写woff，浏览器自动选用第一个支持的格式 - 别漏掉
format('woff2')这类提示，虽然现代浏览器能推断，但规范写法更稳妥 - 不用 TTF 或 OTF 直接上生产——它们没压缩，体积通常是 WOFF2 的 2–3 倍
字体加载失败后页面文字闪动（FOIT/FOUT）怎么稳住
默认情况下，Chrome 等浏览器会在字体加载完成前隐藏文字（FOIT），或回退到备用字体（FOUT）。用户看到文字“跳一下”，是因为没控制好加载时机。
- 加
font-display: swap到每个@font-face块里，强制启用 FOUT，避免空白等待 - 慎用
block（默认值）——移动端弱网下可能白屏超 3 秒 - 如果必须等自定义字体，用
font-display: optional+ JS 检测document.fonts.load后再渲染关键文案
第三方字体服务（如 Google Fonts）的 @import 和 <link> 差在哪
用 @import 引入 Google Fonts 是常见错误：它会阻塞 CSS 解析，拖慢渲染；而 <link rel="stylesheet"> 可并行下载。
- 永远优先用
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> - 不要在 CSS 里写
@import url('https://...');，尤其不在主样式表顶部 - 自托管更可控：下载字体文件 + 写
@font-face，避开 DNS 查询、CDN 故障、服务商策略变更等外部风险
最常被忽略的是 font-display 和路径解析逻辑——前者影响首屏体验，后者让整个声明形同虚设。改完记得清缓存再刷，浏览器对字体资源特别爱缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
