通过@font-face加载网页字体时，.woff和.ttf文件会引发NetworkError: 404 Not Found错误。

Question

当通过@font-face加载Web字体时，.woof和.ttf文件会抛出NetworkError：404 Not Found。

我已经查看了stackoverflow中的所有相关主题，但我找不到解决方案。

即使我在.htaccess和apache-httpd.conf中添加了以下代码。但没有用。

Header set Access-Control-Allow-Origin "*"

我们正在遵循大多数stackoverflow主题建议的Mo'Bulletproofer方法

以下是我的CSS代码，

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-light-webfont.woff') format('woff'),
         url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: 100;
    font-style: normal;

}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/proximanova-lightitalic-webfont.eot');
    src: url('../fonts/proximanova-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-lightitalic-webfont.woff') format('woff'),
         url('../fonts/proximanova-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-lightitalic-webfont.svg#ProximaNovaLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;

}

即使我们在url中指定的路径是正确的。

在stackoverflow上，大多数相关主题主要为windows - IIS服务器提供解决方案，而不是更多的Apache。

在控制台上抛出错误。

"NetworkError: 404 Not Found - http://localhost:8888/test/assets/fonts/proximanova-light-webfont.woff"
proxim...nt.woff
"NetworkError: 404 Not Found - http://localhost:8888/test/assets/fonts/proximanova-reg-webfont.ttf"

我们将文件放在与 font-face 相同的目录中。

- Dinesh Babu

---

在使用.woff和ttf文件的Web字体时遇到了相同的问题。 - Vivek Vikranth

显然，URL不正确，我们对问题的了解比您少得多。我们只看到相对URL，没有关于基本URL的任何信息。尝试使用浏览器的开发人员工具（网络选项卡）查看HTTP级别上实际发生了什么：发送了什么确切的请求？如果直接在浏览器中访问那里使用的绝对URL会发生什么？ - Jukka K. Korpela

@JukkaK.Korpela 感谢您的评论。我编辑了我的问题，请看一下。 - Dinesh Babu

当您尝试在浏览器中直接访问错误消息中提到的URL时，会发生什么情况？如果您得到了404错误，那么这些URL就是错误的。例如，文件名与URL中字母大小写的区别可能是一个问题。 - Jukka K. Korpela

在 localhost 中，当我们直接访问URL时，它会被“下载”。而在从CSS中调用时，它不会抛出404错误。但是在我们的“开发服务器”中，如果我们直接访问URL，则会抛出“禁止访问”错误。因此，我在apache中启用了Header set Access-Control-Allow-Origin "*"。但仍然无法正常工作。 - Dinesh Babu

Answer 1

您可以在您的 .htaccess 文件中使用以下内容。

 <FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

- Jerald

---

我尝试过这个。但还是不能工作。还有其他方法吗？ - Dinesh Babu

你好，你有这个问题的解决方案吗？ - Mohsin