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

现在我们的主要亮点 - “CSS3111：@ font-face遇到未知错误”。这个错误很模糊。如果你再次查看MSDN，你会看到它的描述说：“层叠样式表”的“Web Open字体格式（WOFF）”和“嵌入式OpenType字体（EOT）”遇到了一个未知问题（ 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/

Answer 2

您必须将字体转换为base64。

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

使用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中的值： WebFont include example

Answer 3

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

IE9 @ font-face遇到未知错误

3 个答案: