IE9 @font-face遇到未知错误

Question

我在IE9（Windows 7）上遇到了@font-face的问题。 XP上的IE8和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出现问题呢？

- Fraser

---

你自己转换了这些字体吗？ - Sampson

是的，通过Font Squirrel。 - Fraser

你尝试过其他的字体转换器吗？ - Sampson

我尝试使用 convertfonts.com 进行转换。我找到的另一个网站是 fontface.codeandmore.com，但那是付费服务。 - Fraser

好的。这似乎是一个比较常见的问题。请在那里看一下。 - Sampson

可能是重复的问题：https://dev59.com/WWgu5IYBdhLWcg3wHzoX。同时，请查看搜索结果：https://www.google.ca/search?num=100&hl=fr&newwindow=1&q=CSS3111%3A+%40font-face+encountered+unknown+error.+site%3Astackoverflow.com - Milche Patern

Answer 1

现在让我们来看看主要的亮点 - "CSS3111：@font-face遇到未知错误"。这个错误非常模糊。如果你再次查看MSDN，你会发现它的描述说：“在层叠样式表（CSS）字体的Web开放字体格式（WOFF）和嵌入式OpenType字体（EOT）中遇到了一个未知问题”。 “未知问题”听起来对我来说不太好 - 我应该如何解决一个未知的问题呢？幸运的是，我们在这里得到了一个提示。它说：“检查字体的来源”。事实上，CSS3111通常是由于字体的二进制源代码有问题引起的。例如，其中一个流行的在线TTF转EOT转换器会生成带有名称表的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/

- Siddharth Pandey

---

我和你一样：谷歌搜索“CSS3111：@font-face遇到未知错误”，并且得出了与你相同的结论。 - Milche Patern

是的，这是正确的方法，总是搜索错误编号。干得好。 - Siddharth Pandey

Yoda，请看一下这个链接：https://www.google.ca/search?num=100&hl=fr&newwindow=1&q=CSS3111%3A+%40font-face+encountered+unknown+error.+site%3Astackoverflow.com - Milche Patern

Answer 2

你需要将字体转换为Base64格式。

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

2. 将步骤 1 的输出用于 CSS 文件中，如下所示：

   src: url(data:application/x-font-woff;charset=utf-8;base64, [不带括号的步骤 1 中的 base 64 值]) format('woff');
   

最终结果将类似于这样，其中your base64是第一步中的值： 祝好运！

- nikoloza

---

尽管看起来很奇怪，但它确实有效，但不幸的是，它随后停止了在Firefox和Chrome中的字体工作。 - SharpC

@SharpC 从未尝试过，但我猜在base64解决方案之前或之后留下woff的URL可能会起作用。 - nikoloza

似乎是一个流氓的.eot字体导致了Firefox的问题 - 删除它后现在运行得很好，谢谢！ - SharpC

Answer 3

尝试在您的CSS中使用一个简单的行来定义字体，使用绝对URL，例如：

@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）中使用此说明，将我的原始.ttf字体转换为（http://www.font2web.com/）

- Gabri