我的自定义字体不想在 Internet Explorer 中使用

Posted 2023-03-06

【中文标题】我的自定义字体不想在 Internet Explorer 中使用

【英文标题】：My custom font doesn't want to work in Internet Explorer

【发布时间】：2012-02-14 10:00:50

【问题描述】：

我正在尝试在我正在开发的网站上使用 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 */  
  

【问题讨论】：

叹息 ...如果我每次对自己说，只有 $$$，“天哪，这适用于除 Internet Explorer 以外的所有浏览器。”

你听说过cufon吗？可能值得一看：cufon.shoqolate.com/generate

应该可以，你用什么来转换字体的？

【参考方案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 版本，只需删除这些行。

【讨论】：

非常感谢，这解决了问题。烦人的是微软的字体渲染很糟糕但是很好。

我已经有了这个答案中描述的代码，但是在 IE 中它似乎仍然无法正常工作。我发现 IE 需要结合 F5 键和加载不同的页面来共同行动。