图标字体在的所有版本中不透明
我用IcoMoon创建了几个图标字体。
它们在所有其他浏览器中都能正常工作，但出于某种原因，它们在所有经过测试的IE版本(8-11)中都是完全不透明的。引导图标字体看起来很好，所以这是我必须做或不做的事情。
你可以在左上角看到它：http://voicethread.com/new/myvoice/#browse
它在不同浏览器中的外观：
回答 1
Stack Overflow用户
发布于 2014-11-02 17:39:29
我猜IcoMoon创建字体文件的方式有一个问题。
我在Chrome、IE和FF (分别)的渲染中遇到了困难：
字体似乎正在传递到站点，好吗：
下面是您的CSS文件的相关部分，如果将这些部分包含在问题中不会有什么害处：
@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文件来确认这一点。
它显示了同样的问题，所以不太可能是浏览器。
如果双击该图标，您将看到用于创建该图标的确切向量：
正在发生的是，圆圈和VT标志都呈现在“正面”层上。圆圈内的所有东西都被填充，使得"VT“填充不可见。通过改变圆圈的形状和看到VT从“后面”出来，您可以很容易地看到这一点。
我不知道圆圈有什么不同，但twitter圈似乎正确地取消了内部形状。因此，您可以复制并粘贴该圆圈到您的另一个图标，以获得以下内容：
然后导出并上传到您的主机
为了更好的衡量，我保存了更改，导出了一些相关的字体文件，以及将它们添加到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范围，这样浏览器只需要下载它绝对需要的字符，比如：unicode-range: U+E600-E626;。
进一步阅读
- http://css-tricks.com/snippets/css/using-font-face/
- https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
- http://fontforge.github.io/en-US/
https://stackoverflow.com/questions/26702031
复制相似问题
腾讯云开发者
