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

Question

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

@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)。