在 IE8 中嵌入 FontAwesome 字体时出现 CSS3111 错误

Question

我在我的页面上使用 FontAwesome (http://fortawesome.github.com/Font-Awesome/) 作为网页字体：

http://www.jungledragon.org/apps/jd3/

我的问题是字体无法在 IE8（标准模式）中加载，而是显示方块。由于这些图标对设计至关重要，我很想解决这个问题。

我已经研究了很多问题和答案，所以让我告诉你我做了什么来解决这个问题。首先，我使用推荐的格式来嵌入此字体：

@font-face {
  font-family: 'FontAwesome';
  src: url('../type/fontawesome-webfont.eot');
  src: url('../type/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  url('../type/fontawesome-webfont.woff') format('woff'),
  url('../type/fontawesome-webfont.ttf') format('truetype'),
  url('../type/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

这是 x-browser 加载字体的事实标准，与 FontSquirrel 等工具生成的输出相同。 type 目录是相对于我的 CSS 目录的，这个字体会在除 IE8 之外的所有浏览器中加载。

其次，我启用了跨域起源 (CORS)，所以这绝对不是问题。

有些人建议加载 html5 shiv 可能会干扰 IE8 加载字体，但完全删除 shiv 加载仍然没有任何区别。

该站点在 Apache2 上运行，添加 mime 类型似乎对结果没有任何影响。此外，我可以确认我可以使用直接路径从 IE8 下载 eot 文件，因此该文件绝对可以访问。

我不知道我做错了什么，但这一定是我的问题。原因很简单：从 IE8 打开 FontAwesome 官方网站可以正常加载字体。此外，我使用的辅助字体（网站徽标中使用的字体）也可以很好地呈现。第二种字体来自 Google webfonts，而 fontawesome 字体托管在与网站相同的域中。

我没有办法解决这个问题，有什么线索吗？

更新：我应该在 IE 开发人员工具栏中添加，这是我得到的错误：

CSS3111：@font-face 遇到未知错误。 fontawesome-webfont.eot

我发现这篇文章讨论了这个错误：

http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

...但我没有看到对我有帮助的解决方案。

Answer 1

最终，这个答案解决了我的问题：

https://stackoverflow.com/a/12459447/80969

我不得不使用一个不起眼的字体编辑程序来编辑 fontawesome 下载包附带的 ttf 文件。在那里，我将“人类字体名称”重命名为与所有其他“名称”字段相同。接下来，我使用http://www.font2web.com/ 生成了一个新的 .eot 文件并将其集成到项目中，其他一切都保持不变。很快，它就起作用了！

看起来我的 font-awesome 版本在下载中内置了问题。

Answer 2

也值得检查http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/。