Question

我正在使用font-face导入我的自定义网络字体但是字体没有加载到浏览器中它显示404文件未找到错误在控制台但我的字体在同一目录中，字体的名称与我提到的相同font-face

@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-reg-webfont.eot");
  src: url("../fonts/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

此外，我尝试在.httaccess上添加这些行，它确实有效，我也浏览了SO没有人有正确的解决方案，请帮助我。

AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .wof

Answer 1

您的网站是否在Windows服务器上运行？如果是这样，请尝试为字体扩展添加正确的Mime类型。这可能与以下内容重复：Why is @font-face throwing a 404 error on woff files?

顺便说一句，你的问题中“AddType”代码块的最后一句中有拼写错误。它的.woff（2 f）。

Answer 2

试试这个：

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

@font-face {
  font-family: 'Proxima Nova';
  src: url("./fontsproximanova-reg-webfont.eot");
  src: url("./fontsproximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-reg-webfont.woff") format("woff"), url("./fontsproximanova-reg-webfont.ttf") format("truetype"), url("./fontsproximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

AddType指令用于让服务器发送带有正确MIME类型标题的字体文件（以便浏览器知道如何解释它们），并且无法帮助解决404错误。 404告诉我CSS中的url是不正确的。

让我知道它是否有效。

Answer 3

我想补充一下，因为这个问题困扰着我，Apache在/etc/httpd/conf.d/autoindex.conf中有/ icons /的别名

@ font-face显示导入.woff和.ttf字体的404错误

3 个答案: