FontAwesome无法在IE11的Windows 8.1上加载 [英] FontAwesome does not load on Windows 8.1 on IE11

问题描述

我的网站 www.jungledragon.com 大量使用了图标字体"FontAwesome".本周，我将系统升级到安装了IE11的Windows 8.1.我注意到FontAwesome字体无法完全加载，并且浏览器控制台显示以下错误:

My website www.jungledragon.com makes heavy use of the icon font "FontAwesome". This week I upgraded my system to Windows 8.1, which comes with IE11 installed. I noticed that the FontAwesome font fails to load completely, and the browser console shows these errors:

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: fontawesome-webfont.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: fontawesome-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: fontawesome-webfont.ttf

我知道这些错误的含义，这与跨源许可有关，因为在我的案例中，实际的字体文件托管在Amazon S3上.

I know what these errors mean, they are related to cross origin permissions, due to the actual font files being hosted on Amazon S3 in my case.

但是，这是很奇怪的事情:我确实将CORS策略应用到了相关的存储桶中，并且这一直有效.为了进行更多研究，我尝试将IE11设置为不同的文档模式，即IE10，IE9和IE8.在所有情况下均无法加载字体.这很奇怪，因为当我使用Windows 8时，它可以在IE8、9和10上正常运行.

However, here is the weird thing: I do have a CORS policy applied to the bucket in question, and this has always worked. To do some more research, I tried putting IE11 into different document modes, being IE10, IE9, and IE8. The font fails to load in all cases. This is strange, since when I was on Windows 8, it would work on IE8, 9 and 10 just fine.

这些文档模式看起来真的没用，因为我随后继续使用浏览器堆栈进行了一些实际测试，使用了真正的本机浏览器版本而不是文档模式.在Windows 7和8上，字体都可以在IE8、9、10和IE11预览中很好地加载.

It looks like those document modes are really useless though, since I then continued to do some real testing using browserstack, making use of real native browser versions instead of document modes. On both Windows 7 and 8, the font loads fine in IE8, 9, 10, and also in the IE11 preview.

我现在对问题出在哪里有些迷惑.该问题是否是Windows 8.1的特定结果(在我看来，但我无法在浏览器堆栈中进行测试，因此不可用)?还是仅在IE11的最终版本中可能有问题?如果是这样，为什么在每种文档模式下都存在问题?

I'm now a bit lost on where the problem is. Is the problem a result of Windows 8.1 specifically (it seems for me, but I can't test that in browserstack, it's not available)? Or is it perhaps a problem only in the final version of IE11? And if so, why is it a problem in every document mode?

注意:如果您想帮助测试，请在网站上很容易查看是否加载了字体:全局导航栏将没有图标以及网站的其他区域.

Note: should you be wanting to help in testing, on the website it is very easy to see whether the font loads or not: the global navigation bar will have no icons, as well as several other areas of the site.

推荐答案

我们在通过fast.fonts.com使用Avenir字体时遇到了同样的错误.它们在IE10、9、8 ...中工作得很好，但在IE11中却没有.我们的问题在使用IE11的Windows 7上得到了展示.

We're seeing the same sort of error using Avenir fonts via fast.fonts.com. They work perfectly fine in IE10, 9, 8...but not IE11. Our issue is exhibited on Windows 7 using IE11.

好奇的是在fast.fonts.com上，您可以选择给我们提供JS文件或CSS文件调用. JS调用失败，但CSS失败.不幸的是，CSS调用在Firefox上不起作用.

What's curious is at fast.fonts.com, you get the option to us either a JS file or a CSS file call. The JS call fails, but the CSS does not. Unfortunately, the CSS call doesn't work on Firefox.

错误示例:CSS3114:@ font-face未能通过OpenType嵌入权限检查.权限必须是可安装的.文件:6662a841-5b52-4af6-a868-6b43e3d7b263.ttf

Example error: CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: 6662a841-5b52-4af6-a868-6b43e3d7b263.ttf

这篇关于FontAwesome无法在IE11的Windows 8.1上加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！