使用@font-face时，Internet Explorer无法显示字体图标

Question

我在IE浏览器（IE9）中遇到了字体无法正确加载的问题，但在Chrome浏览器中却可以正常显示。你可以通过查看这个Fiddle链接来看到这个问题。

我正在使用FontAwesome包，可以在这里找到该包。我认为问题出在.css文件顶部的@font-face声明上（如下所示）。请问有人知道IE为什么无法渲染该字体吗？

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

- John Livermore

Answer 1

发现问题所在。我的IE9处于兼容模式下，当我关闭该模式后，字体开始正常显示。

- John Livermore

---

你无法想象我花了多少时间才在同样的问题上找到答案...我整整用了一天的时间，祝你工作顺利。 - Francesco Belladonna

Answer 2

在jsfiddle中，您没有为任何元素设置font-family，您正在使用斜体（i元素），但是您的@font-face仅指定了普通字体，并且jsfiddle未演示该问题，因为@ font-face 丢失了（并且不会在那里起作用，因为URL是相对的）。

此外，您的jsfiddle尝试样式化生成的内容，而不是正常内容。 使用的字符是私有使用字符（U + F060），这种字符不应被传输和使用，除非通过私人协议达成一致。

最好将问题隔离在可能的最简单情况下，以消除其他问题的影响（例如生成内容的问题）。

- Jukka K. Korpela

---

好的。我以为在 Fiddle 中有一个最简单的情况。我能够在本地（Fiddle 环境之外）复制这个情况，但由于 CSS 引用字体文件，我不得不将 FontAwesome 包添加为 Fiddle 的资源。我的服务器上的资源与从 FontAwesome 网站下载的原始资源相同。我认为如果您查看所引用的 CSS 资源，您会看到正在设置字体族。此外，由于字体在 Chrome 中回传，所以我相信相对 URL 正常工作。 - John Livermore

我认为可能是IIS和/或jsFiddle使用的Web服务器上缺少某个设置。我创建了一个示例页面，并且将其从文件系统加载到两个浏览器中，结果运行良好。我在IIS中检查了MIME类型，但.eot已经存在，添加其他类型也没有解决问题。 - John Livermore