我用IcoMoon 创建了几个图标字体。
它们在所有其他浏览器中都能正常工作，但出于某种原因，它们在所有测试过的 IE 版本 (8-11) 中完全不透明。 Bootstrap 的图标字体看起来不错，所以这是我必须做或不做的事情。
你可以在左上角看到它：http://voicethread.com/new/myvoice/#browse
它在不同浏览器中的外观：
【问题讨论】：
标签： css twitter-bootstrap internet-explorer cross-browser font-family
我猜IcoMoon 创建字体文件的方式存在问题。
我在 Chrome、IE 和 FF（分别）中渲染时遇到问题：
字体似乎可以正常发送到网站：
以下是您的CSS file 的相关部分，将其包含在问题中不会有什么坏处：
@font-face {
font-family: 'vt-icons';
src: url('fonts/vt-icons/fonts/vt-icons.eot?ovc75f'); /* IE9 Compat Modes */
src: url('fonts/vt-icons/fonts/vt-icons.eot?#iefixovc75f') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/vt-icons/fonts/vt-icons.woff?ovc75f') format('woff'), /* Modern Browsers */
url('fonts/vt-icons/fonts/vt-icons.ttf?ovc75f') format('truetype'), /* Safari, Android, iOS */
url('fonts/vt-icons/fonts/vt-icons.svg?ovc75f#vt-icons') format('svg'); /* Legacy iOS */
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'vt-icons';
}
.icon-vt-logo-solid:before {
content: "\e600";
}
.icon-study: before {
content: "\e601";
}
如果您尝试另一个 content 类型，例如 "\e601"，它可以正常工作。所以我猜它是为那个特定项目构建的。
您可以通过下载类似FontForge 的字体查看器并打开.woff file 来确认这一点：
显示同样的问题，所以不太可能是浏览器。
如果您双击该图标，您将看到用于创建它的确切向量：
发生的情况是圆圈和 VT 徽标都呈现在“前”层上。圆圈内的所有内容都被填充，使“VT”填充不可见。您可以通过更改圆的形状并看到 VT 从它“后面”出来很容易看到这一点。
我不确定圆圈的区别是什么，但 twitter 圆圈似乎正确地抵消了内部形状。因此，您可以将该圆圈复制并粘贴到您的其他图标中以获取此图标：
然后只需导出并上传到您的主机
为了更好地衡量，我保存了更改，导出了一些相关的字体文件，并added them to GitHub，以便您下载。
在您添加到自己的主机之前，这将起作用：
@font-face {
font-family: 'vt-icons';
src: url('http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f') format('woff');
unicode-range: U+E600-E626;
}
顺便说一下，你也可以尝试为
@font-family声明添加一个unicode-range，这样浏览器只需要下载它绝对需要的字符，像这样：unicode-range: U+E600-E626;
【讨论】：