修改

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 。我使用@font-face generator中的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' text-shadow hack，将IE版本应用于浏览器世界的其余部分。 “看起来很棒！值得吗？好吧，学到了很多。;）

Answer 2

我在IIS7网站上托管的Web字体遇到了同样的问题，因为suggested by Grillz问题归结为MIME类型。

我已选择根据Mime type for WOFF问题的答案使用“application / octet-stream”。

打开IIS并选择托管字体的网站（IE9和Firefox必须是相同的域名）
双击“Mime Types”
点击右上角的“添加...”。
在“文件扩展名：”中输入“.woff”
在“MIME类型：”中输入“application / octet-stream”

WOFF MIME Type Screenshot

希望将来能节省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

Abalore +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中的所有新功能，而不仅仅是与网络字体相关的功能）。如果您之前没有听说过documentMode，Microsoft has put together a guide会解释它是什么以及如何在您的网站上使用它。

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

的

Answer 7

在IE9 - F12中查看调试屏幕，看看是否有任何CSS3117错误。另见：IE9 blocks download of cross-origin web font

Answer 8

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

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

Answer 9

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

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

Answer 10

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 11

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

Answer 12

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

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

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

修改

12 个答案: