在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等工具生成的相同输出.类型目录是相对于我的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

最终,这个答案解决了我的问题:

/sf/answers/872161321/

我不得不使用一个晦涩的字体编辑程序编辑fontawesome下载包附带的ttf文件.在那里,我将"人类字体名称"重命名为与所有其他"名称"字段相同.接下来,我使用http://www.font2web.com/生成一个新的.eot文件并将其集成到项目中,保持其他所有内容相同.而且,它有效!

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