@font-face的src路径404主因是未严格按css文件位置计算相对路径，须用url("../fonts/xxx.woff2")而非根路径或绝对路径；同时需检查format()关键字匹配、服务器mime类型配置及font-family名称完全一致。
font-face 的 src 路径为什么总是 404
路径错不是“差不多能访问”，而是必须严格按 CSS 文件位置计算。比如 style.css 在 /css/style.css，字体在 /fonts/inter.woff2，那 src 必须写 url("../fonts/inter.woff2")，不能写 url("/fonts/inter.woff2")（除非你确定部署后根路径一致），更不能写 url("C:\fonts\inter.woff2")（本地绝对路径完全无效）。
常见踩坑点：
- 用
file://协议直接打开 HTML：浏览器会因跨域限制拒绝加载字体，必须起本地服务（如vite preview、npx http-server） - 开发者工具 Network 标签里字体请求显示 404：右键复制请求 URL，粘贴到新标签页看是否真能下载；如果 404，说明路径或文件名大小写/扩展名有误（Linux 服务器区分大小写）
- 路径里多一个斜杠、少一个点、引号不闭合、逗号结尾——这些语法错误会让整个
src值被浏览器静默忽略（尤其 Safari 和旧版 Chrome）
format() 里的字符串写错会导致字体被跳过
format() 不是随便填扩展名，它是 W3C 规范定义的关键字。填错就等于告诉浏览器“这个源不支持”，直接跳过该字体文件。
必须严格对应：
-
.woff2→format('woff2') -
.woff→format('woff') -
.ttf→format('truetype')（不是'ttf'） -
.otf→format('opentype')
多个字体源用逗号分隔，但末尾不能有逗号——否则整条 src 声明失效。推荐写法：src: url("../fonts/font.woff2") format("woff2"), url("../fonts/font.woff") format("woff")。
服务器返回 403 或字体不触发下载
字体文件存在，但浏览器请求返回 403（Forbidden）或直接不发起请求，大概率是服务器没配 MIME 类型。Nginx、Apache、甚至某些静态托管平台（如 GitHub Pages）默认不识别 .woff2 等扩展名，直接拒之门外。
关键配置项（以 Nginx 为例）：
types {
font/woff2 woff2;
font/woff woff;
font/ttf ttf;
font/otf otf;
}
同时确认响应头包含 Content-Type，例如：Content-Type: font/woff2。如果用 Vite、Webpack Dev Server 等现代工具链，一般自带正确 MIME 支持，无需手动配；但上线部署到 Nginx/Apache 时这步常被跳过。
font-family 名称不一致导致调用失败
@font-face 里声明的 font-family 是自定义别名，后续所有 CSS 中的 font-family 值必须**逐字符一致**：包括大小写、空格、引号（单/双引号不影响匹配，但建议统一用单引号增强可读性）。
例如：
- 声明：
@font-face { font-family: 'Inter'; ... } - 调用：
body { font-family: 'Inter', sans-serif; }✅ - 调用：
body { font-family: Inter, sans-serif; }✅（无引号也行，但含空格时必须加引号） - 调用：
body { font-family: 'inter', sans-serif; }❌（小写 i 不匹配） - 调用：
body { font-family: 'Inter Bold'; ... }❌（多了空格和 Bold，除非你单独声明了该字重）
另外注意：不要在 font-family 值末尾加 !important 拼写错误（如 !importan），这种非法声明会让整条规则被丢弃。
真正卡住的问题往往藏在最基础的地方：路径算错了基准、format() 写成了扩展名、服务器没回 Content-Type、或者两个地方的 font-family 差了一个字母。这些问题不会报红错，浏览器只是默默不渲染——所以得靠 Network 面板和手动测 URL 来验证，而不是只盯着 CSS 文件看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
