Question

我从http://www.google.com/webfonts嵌入了三个Google字体（Dosis，Open Sans，Lato）

除了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

偶尔打破整个网站。

可以采取哪些措施来解决这个问题？

Answer 1

我找到了这个答案，它比接受的答案更直接地解决了这个问题，这真的应该不是答案：）

现在我们的主要亮点 - “CSS3111：遇到@ font-face 未知错误“。这个错误很模糊。如果你看一下再次MSDN，你会看到它的描述说：“一个未知的问题是遇到“Web开放字体格式（WOFF）”和“嵌入式” “层叠样式表（CSS）字体的OpenType字体（EOT）”。 “未知问题”对我来说听起来不太好 - 我该怎么做解决一个未知问题？幸运的是，我们在这里给出了一个提示。它说：“检查字体的来源”。的确，CSS3111通常会引起由字体的二进制源问题。其中一个流行的在线例如，TTF到EOT转换器生成带有NAME表的EOT文件这不符合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-error/

Answer 2

我使用下面的@font-face：

解决了IE 9上的问题

@font-face {
    font-family: Gidole;
    src: url('Gidole-Regular.woff2') format('woff2'),
         url('Gidole-Regular.woff') format('woff');
}

Answer 3

我们发现由于新的Windows 10策略，您会收到相同的错误。如果您的错误发生在Windows 10 + IE11上，解决方案可以是：

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

Answer 4

评论EOT字体的第二个源声明对我有用。确保你上面的第一个声明＆＃34; src：url（＆＃34; ../ fonts / webfonts / Helvetica Neue.eot＆＃34;）;＆＃34;

在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"); }

Answer 5

希望以下注释对您有用：

如果您的字体位于远程服务器（例如CDN）上，则无法在所有浏览器中正确呈现。这只是部分正确。是的，没有明确的“Access-Control-Allow-Origin”标题，Firefox和Internet Explorer将不会显示您的webfonts（如果您点击F12在IE中打开开发人员工具并转到控制台选项卡，您将获得CSS3117 ：@ font-face失败的跨源请求。限制资源访问。错误）这只是因为IE和Firefox默认不允许跨域字体。另一方面，谷歌浏览器将毫无问题地加载字体，如果你不知道跨源问题，调试这可能会非常令人沮丧。虽然我个人也喜欢将我的字体放在同一个域中，但您仍然可以将它们放在远程位置并在所有浏览器中成功加载它们，只要您将此声明添加到主.htaccess文件中：
<FilesMatch "\.(ttf|otf|eot|woff)$">
      <IfModule mod_headers.c>
          Header set Access-Control-Allow-Origin http://mydomain.com"
      </IfModule>
</FilesMatch>

See the reference

Answer 6

当您使用 desubroutinize d字体时，也会发生此错误，而且没有任何版本的Internet Explorer能够处理。

如果您使用pyftsubset包中的fonttools生成字体文件，请确保不设置--desubroutinize标记。

Answer 7

我在IE11中遇到了同样的问题，我通过将字体文件从.woff转换为{{1}}来解决了这个问题。

通常，请确保浏览器支持字体文件格式。

IE9 - CSS3111：@ font-face遇到未知错误

7 个答案: