@ font-face在IE8中工作，但不是IE9

如上所述，虽然在IE8以及其他所有浏览器中都可以正常显示，但我仍然遇到了@ font-face不能显示在IE9中的问题。 另外，当在我的电脑本地查看时，IE9确实显示字体，而不是完全活着。

该网站是：

bigwavedesign.co.uk/gcc/gcc/

使用的代码是： 

@font-face { font-family: 'LeagueGothicRegular'; src: url('league_gothic_0-webfont.eot'); src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal; }

任何人有任何想法，为什么这可能发生？

干杯!

=============================================

编辑

我发现以下网站显示在IE9相同的字体确定，anyine任何想法他是如何做到这一点？

http://iamthomasbishop.com/

没有答案，只是确认：我有一个类似的问题。 除IE9以外的所有其他IE版本，都使用IETester和原始浏览器。 当更改文档模式（F12开发工具）字体的作品。 不是我怎么喜欢它。

更新 ：有一些欺骗，我设法得到它的工作。 似乎IE9正在使用.woff版本的字体（我已经排除）在我想它会的.eot 。 我用fontsquirrel的@ font-face生成器来获取所有不同的字体变体，并使用smileyface -local将它们包含在我的项目中。 没有改变我的.htaccess文件。 现在工作正常，并在所有IE版本看起来相同： 

 @font-face { font-family: "LucidaFax-bold"; src: url("_font/LucidaFax-bold.eot"); src: local("☺"), url("_font/LucidaFax-bold.woff") format("woff"), url("_font/LucidaFax-bold.ttf") format("truetype"), url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg"); } h1 { font-family: "LucidaFax-bold", serif;}

（ 我甚至用Mark“Tarquin”威尔顿 – 琼斯的文字阴影破解了新鲜的疯狂，把IE浏览器的版本看作是浏览器世界的其余部分。老学校？看起来不错！是否值得呢？ ;）

正如Grillz所build议的那样 ，我在IIS7站点上托pipeWeb字体时遇到了同样的问题，问题归结为MIMEtypes。

我已经select使用“application / octet-stream”基于对于WOFF问题的MIMEtypes的答案。

  1. 打开IIS并select托pipe字体的站点（必须与IE9和Firefox相同的域名）
  2. 双击“MIMEtypes”
  3. 点击右上angular的“添加…”。
  4. 在“文件扩展名：”中input“.woff”
  5. 在“MIMEtypes”中input“application / octet-stream”

WOFF MIME类型截图

希望将来能省10分钟。

对我们来说，诀窍就是改变我们提供的.eot文件的格式。

适用于IE6-9，Firefox 3-4，Chrome，Safari，Android，iPhone。 

 @font-face { font-family: 'Museo'; src: url('/ui/museo300.eot?') format('eot'), url('/ui/museo300.ttf') format('truetype') }

变为： 

 @font-face { font-family: 'Museo'; src: url('/ui/museo300.eot?') format('embedded-opentype'), url('/ui/museo300.ttf') format('truetype') }

我的解决scheme是声明两种不同的字体： 

 @font-face { font-family: "Dereza bold"; src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); } @font-face { font-family: "IE Dereza bold"; src: url("../../assets/eot/dereza_bold.eot"); }

接着： 

 .divclass { font-family: "Dereza bold", "IE Dereza bold"; }

Abalore +1

我的解决scheme 

 @font-face { font-family: "OfficinaSansBookSCC"; src: url('font/OfficinaSansBookSCC.eot'); src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype"); }

在IE 7-9，铬，歌剧，火狐工作。

IE 9需要第一行，IE 7-8需要第二行。

那么既然你已经编辑了你的文章，下面的文字将不会是答案。 你是否指向正确的目录？ 这是从服务器的MIMEtypes问题的任何机会？

================================================== ==

这可能是：

请注意，您的网站必须在documentMode 9中进行渲染，以便利用IE9中包含的新function（包括IE9中的所有新function，而不仅仅是与Web字体相关的function）。 如果您之前没有听说过documentMode， Microsoft已经编写了一份指南 ，介绍它是什么以及如何在您的网站上使用它。

来自http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

在IE9 – F12看看debugging屏幕看看是否有任何CSS3117错误。 另请参阅： IE9阻止跨网页字体的下载

字体松鼠还提供了一个美妙的生成器工具来帮助您创build一个字体工具包，将包括所需的格式，已经写入的CSS，甚至演示页面，看看它是如何使用，以及帮助您可能遇到的问题。

把它的输出结合到我的网站是一件轻而易举的事情，它确实解决了这个问题。

你应该看看这个博客文章保罗·爱尔兰有几件事要说你遇到的问题，他提出了他所谓的'防弹'@ font-face声明。

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://www.fontsquirrel.com使用这个样本的CSS工作正常，我正在工作的项目。; 

 @font-face { font-family: 'QuicksandBook'; src: url('/Quicksand_Book-webfont.eot'); src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'), url('/Quicksand_Book-webfont.woff') format('woff'), url('/Quicksand_Book-webfont.ttf') format('truetype'), url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg'); font-weight: normal; font-style: normal; }

我有这个问题。 原来，我在字体家族声明中缺less一个逗号。

我想添加另一件可能在这种情况下出错的东西。 IE9有一个规则，放弃所有@ font-face声明，不能在第一次加载后caching。 IE9将在第一个显示屏上正确使用字体，但在随后的刷新中，@ font-face将被禁用。 我偶然地closures了浏览器后发现了这个，然后重新打开它，发现我的字体神秘地工作着，只是稍后停止工作。

为了解决这个问题，你简单的需要确保服务你的字体的请求有一个Cache-Control响应头，而不是no-cache 。 我build议将其设置为max-age=3600 。 这将确保您的字体caching一个小时。 IE9将能够一致地显示你的字体。

Interesting Posts