字体加载失败主因是路径错误或格式声明不匹配：路径须相对于CSS文件，且@font-face的src需与文件类型及浏览器兼容性一致；推荐优先使用woff2并提供fallback。
字体加载失败，多数情况是路径写错或格式声明不匹配。核心就两点：路径能被浏览器正确访问，且 @font-face 中的 src 声明与实际文件类型、浏览器支持能力一致。
路径必须相对 CSS 文件本身，不是 HTML 页面
CSS 里的 url() 是相对于当前 CSS 文件位置解析的，不是相对于网页 HTML 所在路径。比如：
- CSS 文件在
/assets/css/style.css - 字体文件在
/assets/fonts/MyFont.woff2 - 那么
url('../fonts/MyFont.woff2')才对（向上退一级进 fonts） - 写成
url('/fonts/MyFont.woff2')就可能 404——除非你服务器真把 fonts 放在网站根目录下
优先用 woff2，但务必提供 fallback 格式
现代浏览器基本都支持 woff2，压缩率高、加载快。但旧版 Safari（woff 或 truetype (.ttf)。建议按兼容性从高到低排列：
-
url('MyFont.woff2') format('woff2')—— 主力格式 -
url('MyFont.woff') format('woff')—— 兜底给老 Safari / Android 4.x -
url('MyFont.ttf') format('truetype')—— 最后保底（IE9+、部分旧移动浏览器）
浏览器会按顺序尝试，遇到第一个能加载的就停。别漏写 format()，否则某些浏览器无法识别类型。
立即学习“前端免费学习笔记（深入）”；
检查文件是否真能通过 URL 访问
直接把 url() 里的路径粘贴到浏览器地址栏，看能不能下载字体文件。如果返回 404 或 403：
- 确认文件确实存在，大小不为 0
- 检查服务器是否允许该扩展名被访问（如 Nginx 默认可能禁止 .ttf/.woff 直链，需加 MIME 类型配置）
- 开发时用本地服务（如 Vite、Webpack Dev Server）一般没问题；但用
file://协议打开 HTML 会因跨域限制导致字体加载失败——必须走 http(s) 服务
字体名声明要和 font-family 调用一致
@font-face 中的 font-family 是自定义别名，后续 CSS 里用它调用。注意：
- 别名里不要有空格或特殊符号（可用短横线，如
'My-Font'） - 引用时大小写敏感，
font-family: 'my-font';和'My-Font'不等价 - 可加
font-weight/font-style区分粗细或斜体版本，避免被浏览器错误合并
基本上就这些。路径对了、格式全了、文件可访问、名字写准了，字体就能稳稳加载。不复杂但容易忽略细节。
