font-face加载失败最主要原因是src路径错误，需确保路径相对于CSS文件位置、使用本地服务器而非file://协议访问、format声明严格匹配格式、font-family名称大小写及引号完全一致，并检查Network中是否返回200或404。
font-face 路径写错是最常见的失败原因
浏览器加载本地字体失败，八成是因为 @font-face 中的 src 路径没对上。它不认相对路径里的“上级目录”跳转（比如 ../fonts/xxx.woff2），也不自动补全扩展名或协议前缀。必须确保路径是相对于当前 index.html 文件位置的、可被浏览器直接请求到的地址。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把字体文件（如
my-font.woff2）放在和index.html同级的fonts/文件夹里，路径就写url('fonts/my-font.woff2') - 在浏览器开发者工具的 Network 面板里刷新页面，看字体请求是否返回 200；如果显示 404，说明路径错了
- 不要用
file://协议直接双击打开index.html—— 多数现代浏览器会因安全策略禁止加载本地字体，必须通过本地服务器（如python3 -m http.server）访问
font-face 的 format 声明不是可选的
虽然某些浏览器能猜出格式，但显式声明 format() 能避免兼容性问题，尤其在旧版 Safari 或 Firefox 上。漏写或写错 format 类型（比如把 woff2 写成 woff），会导致字体加载失败且无提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
src后都跟上对应格式：例如url('fonts/my-font.woff2') format('woff2') - 优先提供
woff2（体积小、支持好），再 fallback 到woff；不用提供ttf或eot，除非要兼容 IE9 及更早版本 - 注意引号：
format('woff2')必须用单引号或双引号包裹，不能写成format(woff2)
font-family 名字没匹配上就等于白定义
@font-face 里定义的 font-family 是一个自定义标识符，后续 CSS 中要用完全一致的字符串（包括大小写、空格、引号）才能生效。很多人定义时写 font-family: 'MyFont'，调用时却写 font-family: myfont 或 font-family: "my font"，结果字体根本不应用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义和使用时保持字符串严格一致：
font-family: 'MyCustomFont'→body { font-family: 'MyCustomFont', sans-serif; } - 避免空格和特殊字符；如果必须用，统一加英文单引号包裹
- 可在开发者工具 Elements 面板中检查元素计算后的
font-family值，确认是否命中了你定义的名字
CORS 问题只在本地服务下才容易暴露
当你用 http://localhost:8000 访问页面，而字体文件实际由另一个端口（如 http://localhost:3000）提供时，浏览器会拦截字体请求并报 Cross-Origin Font Request Blocked 错误。这不是路径问题，而是跨域策略限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 和字体文件由同一个服务端口提供，最简单就是把字体放在同个静态服务目录下
- 如果必须跨域（比如前端代理后端资源），后端响应头需包含
Access-Control-Allow-Origin: *或具体域名 - 开发阶段别用 Chrome 直接打开 file:// URL —— 它连 CORS 报错都不显示，只会静默失败
