font-family名称必须加引号且大小写完全一致，浏览器严格字符串匹配；src路径须相对于CSS文件位置；@font-face需置于CSS最前并配font-display:swap。
font-family 名称必须加引号且大小写完全一致
浏览器对 font-family 是严格字符串匹配，不区分“语义”只认字面值。声明时写了 'HarmonyOS Sans'，调用时写 font-family: HarmonyOS Sans（无引号）或 font-family: "harmonyos sans"（小写），就等于没写。
中文字体、带空格/连字符/数字的名称，必须用英文单引号或双引号包裹，且引号类型、空格、大小写要和 @font-face 块里一模一样：
- ✅ 正确：
@font-face { font-family: 'Zhi Mang Xing'; }+body { font-family: 'Zhi Mang Xing', sans-serif; } - ❌ 错误：
font-family: Zhi Mang Xing;（漏引号）、font-family: "zhi mang xing";（小写）、font-family: ‘Zhi Mang Xing’;（中文引号）
建议用 CSS 变量统一管理，比如 :root { --font-main: 'Inter Variable'; }，再写 font-family: var(--font-main), sans-serif;，避免拼错。
src 路径必须相对于 CSS 文件位置
浏览器解析 url() 时，基准点永远是当前 CSS 文件所在目录，不是 HTML 页面路径，也不是网站根目录。这是 80% 字体 404 的根源。
立即学习“前端免费学习笔记（深入）”；
举例：CSS 文件在 /css/main.css，字体文件在 /fonts/inter.woff2，那么 src 必须写成 url('../fonts/inter.woff2')，而不是 url('/fonts/inter.woff2')（绝对路径易触发 CORS）或 url('fonts/inter.woff2')（少了一级 ../）。
验证方法：打开 DevTools → Network → Filter “Font”，看请求 URL 是否和实际文件位置一致；404 就立刻核对相对路径。
构建工具（如 Vite/Webpack）中需额外注意：
- Vite 默认不处理
url('./fonts/xxx.woff2')中的相对路径，需确认是否启用assetsInlineLimit或将字体放到public/目录下 - Webpack 需确保
file-loader或asset-modules已正确配置，否则字体不会被复制进输出目录
src 列表必须按格式优先级顺序写，且 format() 值严格对应后缀
src 不是随便列几个 URL 就行——浏览器从左到右尝试加载，第一个能解析成功的就停。顺序错了，旧浏览器可能直接跳过整条规则。
推荐顺序：woff2 → woff → truetype（即 .ttf）：
-
woff2放最前：现代浏览器压缩率高、加载快 -
woff次之：IE9+、iOS 5.1+、Android 4.0+ 都支持 -
truetype最后：兼容老 Android 和部分桌面端，但无压缩
format() 的值必须和文件后缀严格对应：
- .woff2 →
format('woff2')（不能写成'woff 2'或'woff2 '） - .ttf →
format('truetype')（不能写成'ttf'或'TrueType'） - 每个
url()后必须跟format()，漏掉一个，Safari 和旧 Edge 会静默忽略整条src声明 - 末尾不能有多余逗号（如
url(...) format(...),），Safari 会直接解析失败
@font-face 必须写在 CSS 解析顺序的前面
@font-face 规则必须在首次用到该 font-family 之前被浏览器读取，否则会跳过渲染——哪怕后面写了正确的调用，字体也不会加载。
常见错误：
- 把
@font-face放在 CSS 文件末尾 - 塞进 Vue 的
<style scoped>或 React 的 CSS-in-JS 作用域里，导致作用域隔离或解析时机错乱 - 用
@import加载含@font-face的外部 CSS —— 它会阻塞关键渲染路径，且部分浏览器延迟执行
✅ 推荐位置：
- CSS 文件最开头（非嵌套、非条件块）
- HTML 的
<style></style>标签内（非@import引入的外部 CSS）
别忘了加 font-display: swap——它必须写在 @font-face 块内部，不是外部选择器里。不加的话，Chrome/Firefox 默认 FOIT（文字不可见直到字体加载完），用户可能看到几秒白屏。
