CSS IE 11：我自己的代码中出现错误 CSS3111，并且 google.com/fonts 不呈现任何字体

IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts

提问by NathanAldenSr

I am developing a website that uses the Google font Open Sanslike so:

我正在开发一个使用 Google 字体的网站，Open Sans如下所示：

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,800italic,800,700' rel='stylesheet' type='text/css'>

Normally, I use Chrome when working with my website, but today I decided to see how it looks in IE 11 (11.0.10240.16431) on Windows 10. Unfortunately, Open Sansisn't being loaded and rendered properly. I see lots of these errors in the Developer Tools console:

通常，我在处理我的网站时使用 Chrome，但今天我决定看看它在 Windows 10 上的 IE 11 (11.0.10240.16431) 中的外观。不幸的是，Open Sans它没有被正确加载和呈现。我在开发者工具控制台中看到了很多这样的错误：

CSS3111: @font-face encountered unknown error.
PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff

Thinking that was strange--I had previously developed a site that loaded Google Fonts just fine in IE 10--I headed on over to https://www.google.com/fonts. More CSS3111errors, with every custom font being displayed in serifinstead:

我觉得这很奇怪——我之前开发了一个可以在 IE 10 中很好地加载 Google 字体的网站——我转到了https://www.google.com/fonts。更多CSS3111错误，serif改为显示每个自定义字体：

Is Google Fonts simply broken for IE 11? The fonts do load correctly in Edge, Chrome, Firefox, etc. I am at a loss for how to proceed to get these fonts to work in IE.

Google Fonts 对于 IE 11 来说是不是简单的坏掉了？字体确实在 Edge、Chrome、Firefox 等中正确加载。我不知道如何继续让这些字体在 IE 中工作。

UPDATE 1

更新 1

Setting the emulated document mode to 8 in IE 11 causes the fonts to render correctly. IE 9+ still exhibited the same issues, however. Is this some kind of incorrect user agent string processing by Google, perhaps?

在 IE 11 中将模拟文档模式设置为 8 会导致字体正确呈现。然而，IE 9+ 仍然存在同样的问题。这可能是谷歌处理的某种不正确的用户代理字符串吗？

UPDATE 2

更新 2

I went to FontSquirreland downloaded Open Sans in all its formats. I also imported the CSS provided in the ZIP. Unfortunately, IE and now Firefox continue to report that the font can't be used. Firefox says downloadable font: not usable by platform.

我去了FontSquirrel并下载了所有格式的 Open Sans。我还导入了 ZIP 中提供的 CSS。不幸的是，IE 和现在的 Firefox 继续报告无法使用该字体。火狐说downloadable font: not usable by platform。

UPDATE 3

更新 3

I've confirmed that IE's Font downloadsetting is set to Enabledfor all security zones.

我已经确认 IE 的字体下载设置对于所有安全区域都设置为启用。

回答by Fraser Crosbie

For me, this issue was caused by a Windows 10 feature called Untrusted Font Blocking. My office network had this turned on in our group policy settings.

对我来说，这个问题是由一个名为Untrusted Font Blocking的 Windows 10 功能引起的。我的办公网络在我们的组策略设置中启用了此功能。

Using this feature, you can turn on a global setting that stops users from loading untrusted fonts that are processed by the Graphics Device Interface (GDI). Untrusted fonts are any fonts that are installed outside the %windir%/Fonts directory. https://support.microsoft.com/en-us/kb/3053676

使用此功能，您可以打开全局设置，阻止用户加载由图形设备接口 (GDI) 处理的不受信任的字体。不受信任的字体是安装在 %windir%/Fonts 目录之外的任何字体。https://support.microsoft.com/en-us/kb/3053676

To disable Untrusted Font Blocking using Group Policy:

要使用组策略禁用不受信任的字体阻止：

1. Open Group Policy Management Editor
2. Under Local Computer Policy, expand Computer Configuration, expand Administrative Templates, expand System, and then click Mitigation Options.
3. In the Untrusted Font Blocking setting select Do not block untrusted fonts

1. 打开组策略管理编辑器
2. 在“本地计算机策略”下，依次展开“计算机配置”、“管理模板”、“系统”，然后单击“缓解选项”。
3. 在不受信任的字体阻止设置中选择不阻止不受信任的字体

To disable Untrusted Font Blocking using Registry Editor:

要使用注册表编辑器禁用不受信任的字体阻止：

1. Open Registry Editor (regedit.exe) and go to the following registry subkey: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Kernel\
2. If the MitigationOptions key is not there, right-click and add a new QWORD (64-bit) Value, naming it as MitigationOptions.
3. To turn this feature off. Type 2000000000000.

1. 打开注册表编辑器 (regedit.exe) 并转到以下注册表子项：HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Kernel\
2. 如果 MitigationOptions 键不存在，请右键单击并添加一个新的 QWORD（64 位）值，将其命名为 MitigationOptions。
3. 要关闭此功能。输入 2000000000000。

IMPORTANT: A computer restart is required for the changes to take effect

重要提示：更改生效需要重启计算机

回答by fpbhb

As weird as it sounds, the solution is to turn on the Windows firewall. With the firewall switched off, you cannot even add TTF fonts to the system, and this is the same problem as with @font-face. I've found that solution here: https://superuser.com/questions/957907/unable-to-install-fonts-on-windows-10

听起来很奇怪，解决方案是打开 Windows 防火墙。关闭防火墙后，您甚至无法向系统添加 TTF 字体，这与@font-face. 我在这里找到了解决方案：https: //superuser.com/questions/957907/unable-to-install-fonts-on-windows-10

回答by TadLewis

Don't worry about font blocking. Turn your fonts into base64 and include through CSS. This way you push the fonts through the browser code and the font files are not downloaded in the usual fashion. This is also a DISA STIG issueto disable downloadable fonts. The solution can be seen at this postand also copied here:

不用担心字体阻塞。将您的字体转换为 base64 并通过 CSS 包含。通过这种方式，您可以通过浏览器代码推送字体，并且不会以通常的方式下载字体文件。这也是禁用可下载字体的 DISA STIG 问题。 解决方案可以在这篇文章中看到，也可以在这里复制：

You just need to Base64the font and include it in a CSS file. Make sure to remove your call to the downloadable WOFF file once you include the call to the new FontAwesomeB64.css

您只需要Base64字体并将其包含在 CSS 文件中。一旦包含对新 FontAwesomeB64.css 的调用，请确保删除对可下载 WOFF 文件的调用

Use https://www.base64encode.org/to encode the WOFF Font-Awesome font file.

使用https://www.base64encode.org/对 WOFF Font-Awesome 字体文件进行编码。

Edit the the resulting file and add these lines. When you get to the src:url line, make sure to run that right into the base64 information you received (don't use the greater than and less than signs I show here.) At the end of that base64 information add the single quote, parentheses, a semi-colon, and curly brace to finish:

编辑生成的文件并添加这些行。当您到达 src:url 行时，请确保将其正确运行到您收到的 base64 信息中（不要使用我在此处显示的大于号和小于号。）在该 base64 信息的末尾添加单引号、括号、分号和花括号结束：

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

You now have a base64 CSS file of the Font-Awesome font that bypasses all font download denial settings in browsers.

您现在拥有 Font-Awesome 字体的 base64 CSS 文件，该文件绕过浏览器中的所有字体下载拒绝设置。

I've found that this works with all fonts, a little heavier on the download but worth the guarantee of functionality.

我发现这适用于所有字体，下载量稍重，但值得保证功能。

回答by crikey

I have this exact problem on many Windows 10 / IE 11 machines (ie web fonts do not work and give CSS3111 errors in the debug console). In all cases the firewall was already on (and managed by group policy).

我在许多 Windows 10 / IE 11 机器上都有这个确切的问题（即 Web 字体不起作用并在调试控制台中出现 CSS3111 错误）。在所有情况下，防火墙都已经打开（并由组策略管理）。

I found that disabling the firewall in the registry HKLM\SYSTEM\CurrentControlSet\Services\SharedAccess\Parameters\FirewallPolicy\DomainProfile\EnableFirewall = 0 followed by a reboot, then setting it back to 1 and rebooting again fixes the problem.

我发现在注册表 HKLM\SYSTEM\CurrentControlSet\Services\SharedAccess\Parameters\FirewallPolicy\DomainProfile\EnableFirewall = 0 中禁用防火墙，然后重新启动，然后将其设置回 1 并再次重新启动可以解决问题。

The other thing that always fixes the problem is to unselect "Internet Explorer" in the Windows Features, reboot, then reselect "Internet Explorer" and reboot again.

另一个始终可以解决问题的方法是在 Windows 功能中取消选择“Internet Explorer”，重新启动，然后重新选择“Internet Explorer”并再次重新启动。

My guess is that this is some type of internal windows firewall bug and both of the above actions trigger the firewall service to clean up some type of internal corruption.

我的猜测是，这是某种类型的内部 Windows 防火墙错误，上述两种操作都会触发防火墙服务来清理某种类型的内部损坏。

回答by Teo Test

In Windows 10 there are three levels for font blocking:

在 Windows 10 中，字体阻止分为三个级别：

• IE security settings for downloading fonts (user part)
• Option "untrusted font blocking" (Computer level)
• Option" Enable front providers" (Computer level)

• 用于下载字体的 IE 安全设​​置（用户部分）
• 选项“不受信任的字体阻止”（计算机级别）
• 选项“启用前端提供程序”（计算机级别）

You have to enable all, to get it working.

您必须启用所有功能才能使其正常工作。