自定义图标字体在IE8上无法正常工作

Question

我们使用图标font-face在我们的网站上显示社交媒体图标，但它们在IE8中无法正确显示。

但奇怪的是，它们在我们的测试服务器上显示正常，而不是在网站上线时，这里可以看到 -

测试服务器

直播服务器

我猜测服务器配置可能是罪魁祸首，但我真的不知道该找什么。有人知道是什么原因引起的吗？感谢。

以下是我使用的CSS，由IcoMoon -

生成

@font-face{
    font-family: 'DD_Icons';
    src: url('fonts/DD_Icons.eot');
}
@font-face{
    font-family: 'DD_Icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),
         url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
    font-weight: normal;
    font-style: normal;
}

.icon-facebook:before{
    font-family: "DD_Icons" !important;
    content: "\e601";
}
.icon-twitter:before{
    font-family: "DD_Icons" !important;
    content: "\e602";
}
.icon-google-plus:before{
    font-family: "DD_Icons" !important;
    content: "\e603";
}
.icon-feed:before{
    font-family: "DD_Icons" !important;
    content: "\e604";
}
.icon-linkedin:before{
    font-family: "DD_Icons" !important;
    content: "\e605";
}
.icon-DD-Options:before{
    font-family: "DD_Icons" !important;
    content: "\e600";
}

Answer 1

这是一个已知问题。显然，IE8在渲染图标字体时遇到问题，因为它不支持同时使用@font-face和:before伪元素。您可以在此处阅读有关此问题的更多信息，并在Adam的评论中提供可能的解决方案：

http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

Answer 2

网络阻止此外部文件被引入（可能是文件类型）或网络策略阻止此作为IE配置。

对于我们为我们的大客户建造的网站而言，这件事发生在我身上。他们的IE9被锁定了。

但是，为了记录，您可以在IE8中使用图标字体。我们一直这样做。在IE8中查看此页面以查看：http://fontawesome.io/whats-new/

我认为链接文章说伪元素和图标字体不能一起工作的原因是因为他试图为实际字母实现图标字体 - 即内容：“A”。

但是，请看FontAwesome实现它们的幕后方式：

<span class="icon-home"></span>

变为：

.icon-home:before {
    content: "\e900";
}

那个\ e900是private use area of Unicode的一部分。这意味着如果.woff或.eot文件被阻止，你会看到，而不是符号。

但是，您可以使用像http://icomoon.io这样的工具来选择要使用的图标，并自定义它以使用与目标图标类似的不同unicode值。

这个页面（http://unicode.johnholtripley.co.uk/all/）证明了这项努力非常有价值。

.icon-home:before {
    content: "\2602";
}

如果字体文件被阻止，

变为。。

Answer 3

当SVG不受支持时，看起来你有.eot文件用于后备。请参阅此主题以获取所需格式CSS @font-face not working in IE8