Question

所以IE9在使用谷歌字体时吐出错误，如下所示：

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />

IE9吐出错误，即使字体仍然正常加载：

CSS3111: @font-face encountered unknown error.

如果我没有在其他人的网页上撰写iframed内容，我很乐意忽略这个错误。：（

在本地托管EOT文件解决了IE的问题：

< !--[if IE 9]>
< link rel="stylesheet" href="/survey/css/lato-ie.css" type="text/css" />
< ![endif]-->

在那个文件中..

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: url("/Lato-Reg-webfont.eot") format("embedded-opentype");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    src: url("/Lato-Bla-webfont.eot") format("embedded-opentype");
}

将它包含在IE9中，错误消失，效果很好。

现在我的问题是，我需要为除IE9之外的所有人提供谷歌字体样式表。例如，我无法做到：

< !--[if !IE 9]>
< link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
< ![endif]-->

或者firefox甚至不会看到该死的包括。

IE的开发人员密谋浪费我们所有的时间吗？

Answer 1

你走在正确的轨道上，你只需要使用downlevel-revealed conditional comment：它会将其隐藏在IE中，但会被其他浏览器选中。

Answer 2

有一个问题，您是否尝试在本地查看文件？

google字体不会在本地呈现，即使它们与绝对的外部链接相关联。（如果是IE）

localhost/project/index.html = good
C:\Project\index.html = bad

IE9 @ font-face蓝调

2 个答案: