小编典典

为什么@font-face 在 woff 文件上抛出 404 错误？

all

我@font-face在我公司的网站上使用它，它工作/看起来很棒。除了 Firefox 和 Chrome 会在.woff文件上抛出 404 错误。IE 不会抛出错误。我的字体位于根目录，但我尝试过使用 css 文件夹中的字体，甚至给出了字体的整个 url。如果从我的 css 文件中删除这些字体，我不会得到 404，所以我知道这不是语法错误。

另外，我使用 fontsquirrels 工具来创建@font-face字体和代码：

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

阅读 105

2022-03-21

共1个答案

小编典典

我遇到了同样的症状 - Chrome 中的 woff 文件出现 404 - 并且正在使用 IIS 6 的 Windows Server 上运行应用程序。

如果您处于相同的情况，您可以通过执行以下操作来解决它：

解决方案 1

“只需通过 IIS 管理器（网站属性的 HTTP 标头选项卡）添加以下 MIME 类型声明： ~~.woff application/x-woff~~ ”

更新： 根据woff 字体和Grsmto的 MIME 类型，实际的MIME 类型是 ~~application/x-font-woff（至少对于 Chrome）。 x-woff 将修复 Chrome404s，x-font-woff 将修复 Chrome 警告。~~

截至 2017 年 ：Woff 字体现已作为RFC8081 规范的一部分标准化为 mime 类型font/woff和font/woff2.

IIS 6 MIME 类型

感谢 Seb Duggan：http ://sebduggan.com/posts/serving-web-fonts-from-
iis

解决方案 2

您还可以在 web config 中添加 MIME 类型：

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

2022-03-21