IE9 @font-face 遇到未知错误

Question

我在 IE9（Windows 7）上遇到了@font-face 的问题。 XP 上的 IE 8 和 mac 上的所有浏览器都没有问题。只需要 IE9。

我像这样嵌入我的字体：

@font-face {
    font-family: 'wendy_lpregular';
    src: url('../fonts/wendylpstd-medium.eot');
    src: url('../fonts/wendylpstd-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/wendylpstd-medium.woff') format('woff'),
         url('../fonts/wendylpstd-medium.ttf') format('truetype'),
         url('../fonts/wendylpstd-medium.svg#wendy_lpregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

它不渲染字体并在控制台中给我以下错误：

CSS3111: @font-face encountered unknown error. 
wendylpstd-medium.eot

我有另一种要嵌入的字体 - 并且它显示正确。是什么导致了曾经出色的 IE9 哭泣呢？

Answer 1

您必须将字体转换为 base64。

1. 使用this fiddle 将您的woff 字体文件转换为base 64。

2. 在您的 CSS 文件中使用第 1 步的输出，如下所示：

   src: url(data:application/x-font-woff;charset=utf-8;base64, [base 64 value from step 1 without brackets] ) format('woff');
   

最终结果将如下所示，其中your base64 是第 1 步中的值：

祝你好运！

Answer 2

尝试使用简单的线条在你的css中定义font-face，并使用absolue urls，例如

@font-face{
    font-family:'wendy_lpregular';
    src:url('your-web.com/fonts/wendylpstd-medium.eot');
    src:url('your-web.com/fonts/wendylpstd-medium.eot?#iefix') format('embedded-opentype'),
    url('your-web.com/fonts/wendylpstd-medium.woff') format('woff'),
    url('your-web.com/fonts/wendylpstd-medium.ttf') format('truetype'),
    url('your-web.com/fonts/wendylpstd-medium.svg#GothamRM') format('svg')
}

检查是否可以在 IE 中打开文件 (your-web.com/fonts/wendylpstd-medium.woff)，如果收到错误 404 转到 IIS，请在安装 IIS 时双击“MIME 类型”配置选项在左侧面板中选择根节点，然后单击右侧“操作”面板中的“添加...”链接。这将弹出以下对话框。添加.woff文件扩展名并指定“application/x-font-woff”为对应的MIME类型

我在这个网站 (Robòtica educativa) 中使用了这个指令，我在 (http://www.font2web.com/) 上转换了我原来的 .ttf 字体

Answer 3

现在是我们的主要亮点 - “CSS3111：@font-face 遇到未知错误”。这个错误非常模糊。如果您再次查看 MSDN，您会看到它的描述说：“Cascading Style Sheets ( CSS）字体”。 “未知问题”对我来说听起来不太好——我应该如何解决未知问题？幸运的是，我们在这里得到了提示。它说：“检查字体的来源”。实际上，CSS3111 通常是由字体的二进制源问题引起的。例如，流行的在线 TTF 到 EOT 转换器之一会生成带有不符合 Microsoft 标准的 NAME 表的 EOT 文件，这会导致 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/