为何@font-face相对URL加载正常却出现404错误？

嘿，我来帮你捋捋这个问题——字体在页面上显示正常，但DevTools却报错，这种情况其实挺常见的，大概率是浏览器加载字体的机制和DevTools的检测逻辑不一致导致的，咱们一步步来排查解决：

1. 字体路径的相对引用偏差 #

你用的是../fonts/这种相对路径，虽然页面渲染时能正常找到字体，但DevTools在某些场景下（比如页面嵌套路由、子目录加载）可能会对路径解析出现偏差。建议改成根相对路径（以/开头），确保浏览器和DevTools都从网站根目录定位字体文件：

@font-face {
  font-family: Impact;
  src: url(/fonts/impact-webfont.eot);
  src: url(/fonts/impact-webfont.eot?#iefix) format('embedded-opentype'),
       url(/fonts/impact-webfont.woff) format('woff'),
       url(/fonts/impact-webfont.ttf) format('truetype'),
       url(/fonts/impact-webfont.svg#impactregular) format('svg');
  font-weight: 400;
  font-style: normal;
}

2. 多字体格式的加载优先级问题 #

你声明了多种字体格式，浏览器会按顺序加载第一个可用的格式，但DevTools可能会标记那些它尝试加载但失败的格式（比如现代浏览器不需要的.eot或.svg）——这其实是浏览器的正常加载策略，并非真的“错误”。如果看着报错难受，可以精简为现代浏览器普遍支持的格式（优先woff2，其次woff），减少不必要的请求：

@font-face {
  font-family: Impact;
  src: url(/fonts/impact-webfont.woff2) format('woff2'),
       url(/fonts/impact-webfont.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

3. DevTools的缓存或误报 #

有时候DevTools的缓存会导致错误提示不更新，试试这几个操作：

• 右键点击刷新按钮，选择清空缓存并硬性重新加载
• 关闭DevTools后重新打开
• 查看网络面板的字体请求状态：如果状态是200（成功），那这个报错大概率是DevTools的误报，不用太在意——毕竟页面显示正常就说明字体已经加载成功了。

4. 字体文件的格式瑕疵 #

有些字体文件可能存在微小的格式问题，浏览器能兼容解析，但DevTools会检测到并报错。可以尝试用专业工具（比如Font Squirrel的Webfont Generator）重新生成标准的web字体文件，确保格式符合规范。

针对你提到的第二款字体kmi-generic，完全可以参照上面的方法逐一排查：检查路径是否正确、精简字体格式、验证文件完整性。

内容的提问来源于stack exchange，提问作者Christian Jensen