先看Network面板中字体请求是否404，路径须相对于CSS文件位置而非HTML；检查url()中无尾随逗号、命名大小写与引号完全一致，并确认字体文件可直连访问。
字体文件 404 了，先看 Network 面板里请求的 URL 是不是错的
浏览器不会主动告诉你“路径写错了”，它只会静默失败——font-family 声明再漂亮，只要 src 指向的地址返回 404，字体就永远不会渲染。打开 DevTools → Network → Filters → 选 Fonts，刷新页面，直接看哪些字体请求标红了。
常见错误包括：
-
url('fonts/MyFont.woff2')写对了，但 CSS 文件在/css/style.css，而字体实际在/assets/fonts/MyFont.woff2—— 相对路径必须从 CSS 文件位置出发算起 - 用了中文或空格命名，比如
url('我的字体.woff2')，浏览器可能编码失败或服务器拒绝服务 - 开发时用
file://协议双击打开 HTML，Chrome 会直接拦截字体请求，报Access to font at 'xxx' from origin 'null'，必须起本地服务（如 VS Code Live Server）
src 里多个 url 用逗号分隔，但末尾不能有逗号
这个细节 Safari 和旧版 Chrome 特别敏感：哪怕其他格式都对，只要 src 最后多了一个逗号，整个声明就会被解析为无效值，不报错、不警告、也不加载任何一种格式。
错误写法：
@font-face {<br> font-family: 'MyFont';<br> src: url('./MyFont.woff2') format('woff2'),<br> url('./MyFont.woff') format('woff'),<br> url('./MyFont.ttf') format('truetype'), <-- 这个逗号要命<br>}
立即学习“前端免费学习笔记（深入）”；
正确写法（无尾随逗号，且 .ttf 对应 format('truetype')，不是 'ttf'）：
@font-face {<br> font-family: 'MyFont';<br> src: url('./MyFont.woff2') format('woff2'),<br> url('./MyFont.woff') format('woff'),<br> url('./MyFont.ttf') format('truetype');<br>}
绝对路径比相对路径更可控，但得从根目录开始写
相对路径容易随 CSS 文件移动而失效；绝对路径写一次就稳定，前提是它真能被浏览器访问到。
推荐写法（以站点根目录为起点）：src: url('/fonts/MyFont.woff2') format('woff2')
注意几点：
-
/fonts/必须是 Web 服务器可公开访问的静态资源路径，不是你本地项目里的./src/assets/fonts/ - 构建工具（Vite/Webpack）默认不会把
fonts/复制到输出目录，需确认配置了 asset 处理规则，或手动把字体放进public/fonts/目录 - 如果部署在子路径（如
https://example.com/myapp/），绝对路径仍以/开头，会请求https://example.com/fonts/...，而非https://example.com/myapp/fonts/...，这时要用相对路径或运行时拼接
调用时 font-family 名称必须逐字匹配，连引号都不能少
声明里写的是 font-family: 'MyFont'，使用时就得写 font-family: 'MyFont', sans-serif。少引号、大小写错、多空格，都会让浏览器找不到匹配项。
验证方法：
- 在 DevTools 的 Elements 面板选中目标元素，切到 Computed 标签，搜
font-family，看最终生效值是不是你定义的名称 - 如果显示的是
sans-serif或系统默认字体，说明没命中自定义声明 - 多个
@font-face声明共存时，检查是否有重名冲突（比如两个都叫'Inter'但来源不同），后声明的会覆盖前声明的
字体加载本身没有“成功回调”，所有判断都依赖 Network 请求状态和 Computed 面板的实际值。最容易被忽略的，是路径计算基准点——它永远是 CSS 文件所在位置，不是 HTML，也不是 JS，也不是你心里以为的“项目根目录”。
