font-face的src路径必须相对于CSS文件位置，而非HTML文件；常见错误包括路径错误、缺少多格式fallback（woff2/woff/ttf）、未设font-display:swap、CORS或MIME配置不当，四者缺一不可。
font-face 的 src 路径必须相对于 CSS 文件位置
很多人把字体路径写成相对于 HTML 文件，结果浏览器在 Network 面板里看到 404，控制台报 Failed to load resource。实际规则是：CSS 里的 url('fonts/Inter.woff2') 中的 fonts/ 是从该 CSS 文件所在目录开始算的。比如 CSS 在 /css/style.css，字体在 /fonts/Inter.woff2，那就要写 url('../fonts/Inter.woff2')。
常见错误包括：
- 用
file://协议直接双击打开 HTML —— 浏览器因 CORS 拒绝加载本地字体，必须起本地服务（如python3 -m http.server） - 部署后路径结构变化，但 CSS 里还写着开发时的相对路径
- 服务器没配 MIME 类型，返回
text/plain而非font/woff2，Chrome 会静默失败
必须提供 woff2 + woff + ttf 多格式 fallback
只放一个 .ttf 文件，Safari iOS 15.4 之前、旧版 Android WebView 就会不认；只放 .woff2，IE 11 和部分国产浏览器就挂掉。现代写法要按兼容性优先级排列：
@font-face {
font-family: 'MyFont';
src: url('./fonts/MyFont.woff2') format('woff2'),
url('./fonts/MyFont.woff') format('woff'),
url('./fonts/MyFont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
format('truetype')对应.ttf，不是'ttf'—— 写错会导致整个src条目被忽略 - 不同字重（如 400/700）和样式（
normal/italic）必须各自声明独立的@font-face块，不能混在一个里 - 如果字体文件本身不含 italic 变体，却声明了
font-style: italic，浏览器会做算法倾斜，效果难看
font-display: swap 是防止 FOIT/FOUT 回闪的关键
没加 font-display 时，文字会先空白（FOIT）或先用系统字体再跳变（FOUT），用户感知极差。加 font-display: swap 后，浏览器会立即用后备字体渲染，等自定义字体加载完成再无感替换。
但它不是万能的：
- 某些低版本 Safari（font-display，需搭配
@supports或 JS 检测降级 - 如果字体文件体积过大（>200KB），swap 期间可能造成明显重排，建议用
font-weight和font-style精确匹配，减少回退次数 - CDN 上的字体若没配
Access-Control-Allow-Origin: *，跨域请求会失败，Network 面板显示CORS error
font-family 名称大小写和引号必须严格匹配
声明时写了 font-family: 'HarmonyOS Sans'，后续 CSS 里就必须写 font-family: 'HarmonyOS Sans', sans-serif;。漏引号、大小写不一致、多空格，都会导致匹配失败，浏览器直接跳过该字体。
容易被忽略的细节：
- 中文字体名含空格或中文时，
font-family值必须用英文单引号或双引号包裹，否则解析出错 - 同一字体多个变体（如 Regular / Bold / Medium）必须用不同
font-family名或统一族名+不同font-weight，否则浏览器无法区分 - 别在
@font-face里写font-weight: bold却在 HTML 元素上只设font-weight: 600—— 数值不匹配就会回退
font-family 是否显示你定义的名字。路径、格式、名称、CORS，四者缺一不可。 
