在使用Font Awesome时出现了使用fontawesome-webfont.woff的错误。

Question

我正在尝试在我的项目中使用Font Awesome字体图标。我修改了font-awesome.css文件，将其指向存放字体文件的目录。现在它看起来像这样：

src: url('fontawesome-webfont.eot?v=3.2.1');
src: url('fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('fontawesome-webfont.woff?v=3.2.1') format('woff'), url('fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');

但是问题在于，当我运行语句url('fontawesome-webfont.woff?v=3.2.1')时，在我的浏览器控制台上会抛出错误。错误信息如下：

GET http://localhost/***/***/fontawesome-webfont.woff?v=3.2.1 400 (Bad Request)         fontawesome-webfont.woff?v=3.2.1:1
GET http://localhost/***/***/fontawesome-webfont.ttf?v=3.2.1 400 (Bad Request)      fontawesome-webfont.ttf?v=3.2.1:1

如果我修改语句为url('fontawesome-webfont.woff')，则可以正常工作而没有任何错误。我在StackOverflow上找到了这个问题，其中用户遇到了相同的问题，但没有提供令人满意的答案。

有人知道原因吗？还有，为什么字体的URL中提供了额外的参数，例如fontawesome-webfont.eot?#iefix&v=3.2.1和fontawesome-webfont.svg#fontawesomeregular?v=3.2.1？

- Naveen

Answer 1

我曾经遇到了类似的问题：只有带有版本号的fontawesome-webfont.woff?=3.2.1出现错误，但是另一个没有版本号的woff文件可以正常加载，而ttf文件也可以正常加载，没有任何问题。

我已经将woff的MIME类型添加为font/woff，并将其添加到应用程序的MIME类型中。
现在状态码显示为200。
谢谢。

- dblk1965

---

第一行代码是为了支持IE9，但需要进行IIS配置修复。第二行代码是为了支持IE6-8。请参见http://webmasters.stackexchange.com/questions/26992/if-i-have-only-woff-and-eot-what-browsers-am-i-supporting-with-font-face和http://www.fontspring.com/blog/fixing-ie9-font-face-problems。 - RockResolve

这对我有用，但我想知道...为什么这样修复它？ - Douglas Timms

Answer 2

只需添加以下 MIME 类型 :) woff font/woff woff2 font/woff2

- Anas Khalil

Answer 3

这个问题的原因是字体路径错误或缺少所需的字体。要解决此问题，请按照以下步骤进行：

1：访问http://fontawesome.io/

2：下载字体并提取已下载的zip文件

3：进入字体文件夹，复制字体

4：将字体粘贴到http://localhost/***/***/

希望对您有所帮助。

- Khandad Niazi