Bootstrap glyphicon显示但IE11引发CSS3111错误

Question

Bootstrap glyphicon显示正常，但IE11控制台报告CSS3111: @font-face encountered unknown error这些文件：

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.woff
• glyphicons-半身-regular.ttf

这是我的样式表中的Bootstrap覆盖（只更改了URL路径）：

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot');
    src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), 
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
        url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

旁注： 如果我在第一个!important网址后添加src，则图标不会显示。

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../vendor/bootstrap/fonts/glyphicons-halflings-regular.eot') !important;
...}

使用Bootstrap 3.3.4，IE11

如何摆脱错误？

Answer 1

这可能与名为Untrusted Font Blocking的组策略设置有关。在此处阅读更多相关信息：IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts

Answer 2

这对你有帮助我猜...

IE9 - CSS3111: @font-face encountered unknown error

和这些，

试试这个http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/是否有助于解决这个神秘错误。

http://fontface.codeandmore.com上的解决方案现在集成了FontForge，因此您只需使用http://fontface.codeandmore.com转换字体。