@ 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的@ 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”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')
}

Answer 4

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

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

Answer 5

阿巴罗尔+1

我的解决方案

@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，chrome，opera，firefox工作。

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

Answer 6

好了，因为你已经编辑了你的帖子，下面的文字将不是答案。 你指向正确的目录吗？ 这可能是服务器的mime类型问题吗？

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

这可能是这样的：

重要的是要注意您的站点必须在documentMode 9中呈现，以便利用IE9中包含的新功能（包括IE9中的所有新功能，而不仅仅是与Web字体相关的功能）。 如果您之前没有听说过documentMode，那么Microsoft已经整理了一份指南 ， 该指南解释了它是什么以及如何在您的网站上使用它。

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

Answer 7

在IE9 - F12中查看调试屏幕，看看是否有任何CSS3117错误。 另请参阅： IE9阻止跨源Web字体的下载

Answer 8

Font Squirrel还提供了一个很棒的生成器工具，可以帮助您创建一个字体工具包，其中包括所需的格式，已编写的CSS，甚至是一个演示页面，以查看它是如何使用的，以及您可能遇到的问题的帮助。

将输出结合到我的网站中是一件轻而易举的事，它确实完美地解决了问题。

Answer 9

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;
}

Answer 10

我有这个问题。 事实证明我在font-family声明中缺少逗号。

Answer 11

我想在这个场景中添加另一个可能出错的东西。 IE9有一条规则，丢弃在第一次加载后无法缓存的所有@ font-face声明。 IE9实际上会在第一个显示器上正确使用字体，但在后续刷新时，@ font-face将被禁用。 我偶然关闭浏览器后发现了这个，然后重新打开它，发现我的字体神秘地工作，只是为了稍后停止工作。

要解决此问题，您需要确保为您的字体提供服务的请求具有除非no-cache之外的Cache-Control响应头。 我建议将其设置为max-age=3600 。 这将确保您的字体缓存一小时。 IE9然后将能够一致地显示您的字体。

Answer 12

你应该查看这篇博文，Paul Irish对你遇到的问题有一些说法，他想出了他所谓的'防弹'@ font-face语句。

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