Css 图标字体在所有版本的Internet Explorer中都是不透明的

我创建了两个图标字体

它们在所有其他浏览器中都可以正常工作，但由于某些原因，它们在所有经过测试的IE版本（8-11）中都是完全不透明的。Bootstrap的图标字体看起来不错，所以这是我必须做或不做的事情

您可以在这里的左上角看到它：

它在不同浏览器中的外观：

---

我猜创建字体文件的方式有问题

我在Chrome、IE和FF（分别）中渲染时遇到问题：

字体似乎正在发送到站点。正常：

以下是您的问题的相关部分，如果将其包括在问题中，也不会有什么坏处：

@font-face{
字体系列：“vt图标”；
src:url（'font/vt icons/font/vt icons.eot？ovc75f'）；/*IE9兼容模式*/
src:url（'font/vt icons/font/vt icons.eot？#iefixovc75f'）格式（'embedded-opentype'），/*IE6-IE8*/
url（'fonts/vt icons/fonts/vt icons.woff？ovc75f'）格式（'woff'），/*现代浏览器*/
url（'fonts/vt icons/fonts/vt icons.ttf？ovc75f'）格式（'truetype'），/*Safari，Android，iOS*/
url（'fonts/vt icons/fonts/vt icons.svg？ovc75f#vt icons'）格式（'svg'）；/*旧版iOS*/
}
[class^=“icon-”]，[class*=“icon-”]{
字体系列：“vt图标”；
}
.图标vt徽标实心：之前{
内容：“\e600”；
}
.图标研究：之前{
内容：“\e601”；
}

如果您尝试另一种

内容

类型，如

“\e601”

，则效果良好。所以我猜这是该特定项目的构建

您可以通过下载字体查看器（如）并打开：

它显示了相同的问题，因此不太可能是浏览器

如果双击图标，您将看到用于创建该图标的精确矢量：

现在的情况是，圆圈和VT徽标都呈现在“前”层上。圆圈内的所有内容都已填充，使得“VT”填充不可见。通过改变圆的形状并看到VT从“后面”出来，您很容易看到这一点

我不确定圆圈之间的区别是什么，但twitter圆圈似乎正确地抵消了内部形状。因此，您可以将该圆圈复制并粘贴到其他图标中，以获得以下结果：

然后只需导出并上传到主机

为了更好的衡量，我保存了更改，导出了一些相关的字体文件，这样你就可以下载它们了

在添加到您自己的主机之前，这将起作用：

@font-face{
字体系列：“vt图标”；
src:url（'http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f格式（'woff'）；
unicode范围：U+E600-E626；
}

工作版本！耶！

顺便说一句，您还可以尝试为

@font-family

声明添加unicode范围，这样浏览器只需要下载它绝对需要的字符，如下所示：

unicode范围：U+E600-E626

进一步阅读




我无法在最新的IE、Firefox或Chrome浏览器中看到“主页”图标。你确定字体图标在你的网络服务器上，而不仅仅是你的本地机器上吗？哦，伙计，这几乎是我见过的最好的答案-我现在有一些计算机问题，但我会解决它，并在解决问题后将其标记为正确。