CSS IE9 - CSS3111：@font-face 遇到未知错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11559592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE9 - CSS3111: @font-face encountered unknown error
提问by Atadj
I embed three Google Fonts from http://www.google.com/webfonts(Dosis, Open Sans, Lato)
我从http://www.google.com/webfonts（Dosis、OpenSans、Lato）嵌入了三个 Google 字体
And they all work fine except IE9 where it returns:
除了返回的 IE9 之外，它们都可以正常工作：
CSS3111: @font-face encountered unknown error.
2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot
CSS3111: @font-face encountered unknown error.
KlmP_Vc2zOZBldw8AfXD5g.eot
CSS3111: @font-face encountered unknown error.
zLhfkPOm_5ykmdm-wXaiuw.eot
And breaks entire website occasionally.
并且偶尔会破坏整个网站。
What can be done to resolve this?
可以做些什么来解决这个问题？
采纳答案by Victor S
I found this answer, which addresses the question more directly than the accepted answer, which really, shouldn't have been the answer :)
我找到了这个答案，它比接受的答案更直接地解决了这个问题，这真的不应该是答案:)
And now to our main highlight - the "CSS3111: @font-face encountered unknown error". This error is very ambiguous. If you have a look at MSDN again, you'll see its description says: "An unknown problem was encountered with the "Web Open Font Format (WOFF)", and "Embedded OpenType font (EOT)" of the Cascading Style Sheets (CSS) font". "Unknown Problem" doesn't sound too good to me - how am I supposed to solve an unknown problem? Fortunately we're given a hint here. It says: "Check source of the fonts". Indeed, CSS3111 is usually caused by an issue with the font's binary source. One of the popular online TTF to EOT converters for example produces EOT files with a NAME table that doesn't comply to the Microsoft standards, which results in EOT fonts that never load in IE and produce the CSS3111 error. So, when you experience a CSS3111, it is always good to try using a different TTF to EOT converter or font face generator.
现在到我们的主要亮点 - “CSS3111：@font-face 遇到未知错误”。这个错误是非常模棱两可的。如果您再次查看 MSDN，您会看到它的描述说：“级联样式表的“Web 开放字体格式 (WOFF)”和“嵌入式 OpenType 字体 (EOT)”遇到了一个未知问题（ CSS）字体”。“未知问题”对我来说听起来不太好 - 我应该如何解决未知问题？幸运的是，我们在这里得到了提示。它说：“检查字体的来源”。事实上，CSS3111 通常是由字体的二进制源问题引起的。例如，流行的在线 TTF 到 EOT 转换器之一生成的 EOT 文件的 NAME 表不符合 Microsoft 标准，这导致 EOT 字体永远不会在 IE 中加载并产生 CSS3111 错误。因此，当您体验 CSS3111 时，最好尝试使用不同的 TTF 到 EOT 转换器或字体生成器。
来源：http: //www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-错误/
回答by KAD
I solved the problem on IE 9 using the below @font-face:
我使用以下方法解决了 IE 9 上的问题@font-face：
@font-face {
font-family: Gidole;
src: url('Gidole-Regular.woff2') format('woff2'),
url('Gidole-Regular.woff') format('woff');
}
回答by malamirada
We've found that you get the same error due to a new Windows 10 policy. If your error occurs on Windows 10 + IE11, the solution can be this:
我们发现由于新的 Windows 10 策略，您会遇到相同的错误。如果您的错误发生在 Windows 10 + IE11 上，解决方法可以是：
IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts
回答by Leo Leoncio
Commenting out the 2nd source declaration for the EOT font worked for me. Make sure you the 1st declaration right above "src: url("../fonts/webfonts/Helvetica Neue.eot");"
注释掉 EOT 字体的第二个源声明对我有用。确保您在“src: url("../fonts/webfonts/Helvetica Neue.eot"); 正上方的第一个声明；
Tested on Chrome, Firefox,Sarafi, IE9-10-11.
在 Chrome、Firefox、Sarafi、IE9-10-11 上测试。
@font-face {
font-family: 'Helvetica Neue';
font-style: normal;
font-weight: 400;
src: url("../fonts/webfonts/Helvetica Neue.eot");
src: local("Helvetica Neue"), local("Helvetica Neue"),
/*url("../fonts/webfonts/Helvetica Neue.eot?#iefix") format("embedded-opentype"),*/
url("../fonts/webfonts/Helvetica Neue.woff2") format("woff2"),
url("../fonts/webfonts/Helvetica Neue.woff") format("woff"),
url("../fonts/webfonts/Helvetica Neue.ttf") format("truetype"),
url("../fonts/webfonts/Helvetica Neue.svg") format("svg"); }
回答by Lukas Schmelzeisen
This error can also occur when you use desubroutinized fonts, which no version of Internet Explorer seems to be able to handle.
当您使用desubroutinized 字体时，也可能发生此错误，似乎没有任何版本的 Internet Explorer 能够处理。
If you are generating your font files using pyftsubsetfrom the fonttoolspackage, make sure that you do notset the --desubroutinizeflag.
如果您正在生成使用您的字体文件pyftsubset从fonttools包，请确保你没有设置--desubroutinize标志。
回答by mtareq
I had the same issue in IE11, I fixed the issue by converting my font file from .woff2to .woff.
我有同样的问题在IE11，我从我的转换字体文件解决了该问题.woff2来.woff。
In general, make sure the browser supports the font file format.
一般来说，请确保浏览器支持字体文件格式。
回答by Ahsan Khurshid
hopefully the following note will be useful for you:
希望以下说明对您有用：
If your fonts are located on a remote server (a CDN for example) they won't render properly in all browsers. That's only partially true. Yes, without an explicit "Access-Control-Allow-Origin" header, Firefox and Internet Explorer won't display your webfonts (if you hit F12 to open up Developer Tools in IE and go to the Console tab, you will get the CSS3117: @font-face failed cross-origin request. Resource access is restricted. error) That's simply because IE and Firefox don't allow cross-domain fonts by default. On the other hand Google Chrome will load the fonts without a problem and if you're not aware of the cross-origin issue, debugging this may get really frustrating. While I personally prefer to place my fonts on the same domain too, you can still place them on a remote location and have them load successfuly in all browsers, as long as you add this declaration to your main .htaccess file:
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin http://mydomain.com" </IfModule> </FilesMatch>
如果您的字体位于远程服务器（例如 CDN）上，它们将无法在所有浏览器中正确呈现。这只是部分正确。是的，如果没有明确的“Access-Control-Allow-Origin”标头，Firefox 和 Internet Explorer 将不会显示您的网络字体（如果您按 F12 在 IE 中打开开发人员工具并转到控制台选项卡，您将获得 CSS3117 : @font-face 跨域请求失败。资源访问被限制。错误）这仅仅是因为 IE 和 Firefox 默认不允许跨域字体。另一方面，谷歌浏览器可以毫无问题地加载字体，如果您不知道跨域问题，调试这可能会非常令人沮丧。虽然我个人更喜欢将我的字体放在同一个域中，
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin http://mydomain.com" </IfModule> </FilesMatch>
