Question

我无法在IE（IE9）中正确加载字体。适用于Chrome。

您可以通过查看此Fiddle来查看问题。在IE9中会显示一个框，而在Chrome中会显示一个星标。

我正在使用找到here的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;
}

Answer 1

找出问题所在。我在兼容模式下使用了IE9。当我关闭它时，字体开始出现。

Answer 2

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

此外，您的jsfiddle会尝试设置生成的内容，而不是普通内容。使用的字符是私人使用字符（U + F060），除私人协议外，不应传输和使用此类字符。

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

Internet Explorer不会使用@ font-face显示字体图标

2 个答案: