IE9 @font

So IE9 spits out an error on using a google fonts include like the following:

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

IE9 spits out an error, even though the fonts still load fine:

CSS3111: @font-face encountered unknown error. 

I'd gladly ignore this error if I weren't writing content that is iframed on other people's webpages. :(

Hosting the EOT files locally resolves the issue for IE:

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

And in that file..

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

Include it in IE9, error's gone, works great.

Now my problem is, I need to include the google font stylesheet for everyone but IE9. For example, I can't do:

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

Or firefox won't even see the damn include.

Are IE's devs conspiring to waste all of our time?


你在正确的轨道上,你只需要使用一个低级别的条件评论:它会隐藏IE浏览器,但会被其他浏览器收到。


One question, are you trying to view your files locally?

The google fonts doesnt render locally, even thou they are linked to absolute outside links. (In case of IEs)

localhost/project/index.html = good
C:Projectindex.html = bad
链接地址: http://www.djcxy.com/p/89926.html

上一篇: Google Fusion地图在IE9中不可见

下一篇: IE9 @font