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

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

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/。

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

2 个答案: