@font-face 路径必须相对于 CSS 文件，且必须设置 font-display: swap；否则易导致 404 或 FOIT 白屏。需正确配置 MIME 类型、字体降级、预加载及 font-family 命名规范。
@font-face 路径必须相对于 CSS 文件，不是 HTML
浏览器解析 @font-face 里的 url() 时，路径是按 CSS 文件所在位置计算的。很多人把字体放在 ./fonts/xxx.woff2，却把 CSS 放在 css/style.css，结果写成 url('../fonts/xxx.woff2') 才对——写成 url('./fonts/xxx.woff2') 就会 404。
常见错误现象：Failed to load resource: the server responded with a status of 404 ()，控制台里点开那个字体链接，看到的是 404 页面而不是字体文件。
- 推荐做法：把字体文件放在和 CSS 同级或子目录下，比如
css/fonts/Inter.woff2，然后src: url('fonts/Inter.woff2') - 绝对路径、
file://协议下直接双击打开 HTML 会触发 CORS，必须起本地服务（如python -m http.server） - 部署到 Nginx 时，确认已配置 MIME 类型：
.woff2→font/woff2，否则 Chrome/Firefox 拒绝加载
必须用 font-display: swap 防止文字长时间空白
不加 font-display: swap，浏览器默认行为是 FOIT（Flash of Invisible Text）：自定义字体没加载完，文字就一直空白，用户盯着白屏等，体验极差。
font-display: swap 的作用是让浏览器先显示 fallback 字体（比如 sans-serif），等自定义字体就绪后再替换——用户看到的是“先有字，再变样”，比“先没字，再出现”合理得多。
立即学习“前端免费学习笔记（深入）”；
- 只写在
@font-face规则里，不能写在font-family应用处 - 不要用
font-display: optional，它可能导致字体根本不用（尤其弱网） - 如果字体文件 >100KB，建议配合
<link rel="preload">提前加载关键字体
woff2 是首选格式，但得配降级 fallback
现代项目应优先提供 .woff2（压缩率高、所有主流浏览器支持），但仅靠它还不够——旧版 Android WebView、IE11 等仍需 .woff 或 .ttf。
同一字体家族不同字重（如 400/600/700）必须各自声明 @font-face，浏览器不会自动加粗模拟；漏掉某个字重，font-weight: 600 就会回退到系统字体。
- 正确写法：
src: url('font.woff2') format('woff2'), url('font.woff') format('woff') - 避免只写
src: url('font.ttf')—— Safari/Chrome 加载慢，移动端耗流量 - 字体名含空格或中文时，
font-family值必须用单引号包裹，例如'Source Han Sans CN'
Google Fonts 的 link 标签不能漏 rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Inter"> 这种写法无效——浏览器不识别为样式表，@font-face 规则根本不会执行，字体永远不会加载。
正确写法必须带 rel="stylesheet"，且推荐加上 &display=swap 参数，否则 Google Fonts 默认不启用 swap 行为。
- 正确示例：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"> - font-family 名称要逐字匹配，大小写、空格、连字符都不能错，比如
'Inter'不等于'inter' - 如果页面同时用了本地字体和 Google Fonts，确保它们的
font-family名不冲突，否则可能互相覆盖
font-display: swap。这两项一错，要么 404 白屏，要么 FOIT 卡顿，用户根本看不到效果。 
