css - 通过@font-face 加载 webfont 时，.woff 和 .ttf 文件抛出 NetworkError : 404 Not Found

标签 css apache .htaccess font-face webfonts

<分区>

通过@font-face、.woof 和.ttf 文件加载webfont 时抛出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 中提到的相同目录中有文件

最佳答案

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

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

关于css - 通过@font-face 加载 webfont 时，.woff 和 .ttf 文件抛出 NetworkError : 404 Not Found，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22626678/

上一篇：css - @font-face 显示我导入的字体 .woff 和 .ttf 的 404 错误

下一篇：css - 代码包 2.0.2 : Sass source maps not working

相关文章：

apache - 通过 Internet 访问 apache HTTP 服务器

apache - 如何制作匹配 Apache 的 etag？

php - 为什么 DirectoryIndex index.php index.html 不工作？

apache - 仅用于重定向的子域

apache - htaccess 中的 301 重定向具有参数 P 的 URL

html - margin bottom 不会将元素向下推

javascript - CSS 中的侧面板

javascript - 如何只针对一个浏览器？

.htaccess - htaccess 重定向除索引页之外的所有内容

html - Bootstrap，如何避免 2 行超过其包含行的大小。？