Question

通过@font-face加载网络文件时，.woof和.ttf个文件会抛出NetworkError: 404 Not Found。

我已经浏览了stackoverflow中的所有相关主题，但我无法找到解决方案。

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

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

我们按照Mo'Bulletproofer method

中大多数主题的建议关注stackoverflow

以下是我的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 server提供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

上提到的同一目录中

Answer 1

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

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

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

1 个答案: