图标字体不在IE11中加载
我们使用icomoon来显示图标字体,并且它们在Chrome和Firefox中运行良好,但不会在IE11中显示...有时。 它似乎在第一次加载页面时起作用,但在后续页面加载时不起作用。 清除缓存似乎不会重置它。 这个问题可能出现在其他IE版本中,现在我们只关注IE11。
这是我们的@ font-face:
@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
url('fonts/icon.woff?-3q3vo5') format('woff'),
url('fonts/icon.ttf?-3q3vo5') format('truetype'),
url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "e600";
}
/* etc etc etc */
但在这里它变得奇怪。 查看开发人员工具,正在发送对字体的HTTP请求,但仅接收几百个字节(可能只是标题)。
但HTTP响应将内容长度正确地列为几千字节。
“响应主体”选项卡只是说“没有要查看的数据”。
您可以在Network Panel屏幕截图中看到Google字体的行为不像这样。
在地址栏中粘贴URL会导致正在下载完整文件。
出现类似的问题,从上面的屏幕截图看,响应的缓存控制标题为“无存储”。 IE似乎有缓存和字体的问题。
删除“Cache-Control:no-store”和“Pragma:no-cache”头文件都可以让我们再次显示图标字体。
https://github.com/FortAwesome/Font-Awesome/issues/6454
我有一个类似的问题,它似乎是由IE与特定的display
和position
设置结合图标字体的困难造成的。
它通常应该使用:
element:before {
display:block;
position: absolute;
... your styles ...
}
我面临类似的问题,但Bootstrap字体图标(Glyphicons)。 你可以尝试如果这个工程:
(通常在Windows 10中)IE-11设置已更改为不下载任何外部字体,并仅使用Windows中可用的字体。 这是默认行为。
不过,我们可以在IE中更改此设置,使其能够下载外部字体。 以下是在IE中采取的步骤 - 转到:设置>> Internet选项>>安全
点击“互联网”(或您可能正在使用的任何区域)>>“自定义级别...”
接下来在'安全设置' - 启用'字体下载'。 默认情况下它会被禁用。
刷新页面
链接地址: http://www.djcxy.com/p/46985.html