为啥@font-face 相对 URL 的加载正确但也会产生 404 错误？

Posted 2023-03-06

【中文标题】为啥@font-face 相对 URL 的加载正确但也会产生 404 错误？

【英文标题】：Why are @font-face relative URL's loading correctly but also producing 404 errors?为什么@font-face 相对 URL 的加载正确但也会产生 404 错误？

【发布时间】：2018-09-16 22:34:09

【问题描述】：

有两种字体，虽然它们在网站上显示得很好，但在 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;

@font-face 
  font-family: kmi-genericons;
  src: url(../fonts/kmi-genericons.eot?70543738);
  src: url(../fonts/kmi-genericons.eot?70543738#iefix)
      format('embedded-opentype'),
    url(../fonts/kmi-genericons.woff2?70543738) format('woff2'),
    url(../fonts/kmi-genericons.woff?70543738) format('woff'),
    url(../fonts/kmi-genericons.ttf?70543738) format('truetype'),
    url(../fonts/kmi-genericons.svg?70543738#kmi-genericons) format('svg');
  font-weight: 400;
  font-style: normal;

控制台错误中的路径不正确。上面的 CSS sn-p 在/wp-content/themes/kmi/css/compiles.min.css 中找到。由于路径是相对的，它应该从/wp-content/themes/kmi/fonts/ 加载。网络选项卡显示它也在识别正确的路径：

所以就好像有 2 个请求对同一个字体：一个在正确的相对路径，一个在不正确的根路径。为什么会这样？

【问题讨论】：

问题是头部区域加载了重复的css样式（compiled.min.css）。

查看页面源代码并查找问题

不同的问题，但不要在 2018 年使用这种加载语法：我们在 2012 年需要所有这些不同的格式，但许多浏览器已经改变了它们的支持，甚至许多浏览器不再被支持。 eot 和 svg 字体不再作为格式存在，ttf 和 otf 字体是系统级字体，其中包含大量对 webfonts 无用的数据，并且没有压缩。今天，您只需要 WOFF/WOFF2。添加其他格式只会浪费带宽，并使调试字体相关问题变得更加困难。先简化，看看你的问题是否仍然存在。如果是这样，让我们​​一起努力

【参考方案1】：

事实证明，尼希米对我的问题的评论是正确的。除了从常规的<link> 标记调用之外，这个 CSS 是通过一个插件（折叠优化之上）通过 javascript 插入的，我没有意识到这一点。因此，它加载了两次，当通过 JavaScript 插入时，相对路径没有解析。

很抱歉错过了这个 - 谢谢！