@ font-face适用于IE8但不适用于IE9

Question

如上所述,虽然在IE8及以下的所有其他浏览器中显示良好,但我在IE9中没有显示@ font-face的问题.此外,在我的计算机上本地查看时,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中显示相同的字体,任何想法他是如何做到的？

http://iamthomasbishop.com/

Answer 1

没有答案,只是确认:我有类似的问题.Font可以在除IE9之外的所有其他IE版本中使用,它们都使用IETester和原始浏览器.更改文档模式(F12开发工具)时,字体有效.不过我不喜欢它.

更新:通过一些技巧我设法让它工作.好像IE9正在使用.woff版本的字体(我已经排除了)比我认为的那样.eot.我使用@字体面发生器从fontsquirrel把所有的不同的字体变化,其中包括他们在我的项目,使用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"Wilton-Jones的文字阴影黑客,将IE浏览器世界的其他版本应用于IE版本.旧学校？看起来很棒!值得吗？嗯,学到了很多东西. ;)

Answer 2

我在IIS7网站上托管的Web Fonts遇到了同样的问题,正如Grillz所建议的那样,问题归结为MIME类型.

我根据WOFF问题的Mime类型的答案选择使用"application/octet-stream" .

1. 打开IIS并选择托管字体的站点(IE9和Firefox必须是相同的域名)
2. 双击"Mime类型"
3. 点击右上角的"添加...".
4. 在"文件扩展名:"中输入".woff"
5. 在"MIME类型:"中输入"application/octet-stream"

希望将来可以节省10分钟.

Answer 3

对我们来说,诀窍就是改变我们正在服务的.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')
}