css - 我的自定义字体不想在 Internet Explorer 中工作

Question

我正在尝试在我工作的网站上使用 Green Pillow 和 Cotidiana 字体。我已经使用@font-face 加载了 .eot 文件，但它仍然无法正常工作...

真的不确定我在这里做错了什么:

@font-face {  
 font-family: "link_font";  
 src: url( "Greenpiloww.eot" ); /* IE */  
 src: local("GreenPillow"), url( "GREENPIL.otf" ) format("truetype"); /* non-IE */  
}  


@font-face {  
font-family: "twitter_font";  
 src: url( "Cotidiana.eot" ); /* IE */  
src: local("Cotidiana"), url( "Cotidiana.ttf" ) format("truetype"); /* non-IE */  
}  

Answer 1

您可以尝试以下语法，称为 bulletproof font-face syntax :

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

显然 .eot 字体后的查询字符串有助于 IE 不阻塞。如果您没有 .svg 或 .woff 版本的字体，只需删除这些行即可。