38

如上所述，我遇到了@font-face 无法在 IE9 中显示的问题，尽管它在包括 IE8 及以下的所有其他浏览器中都能正常显示。此外，当在我的计算机上本地查看时，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/

4

12 回答 12

42

没有答案，只是确认：我有类似的问题。字体适用于除 IE9 之外的所有其他 IE 版本，均使用 IETester 和原始浏览器。更改文档模式（F12 开发工具）时字体有效。不是我想要的。

更新：通过一些技巧，我设法让它工作。似乎 IE9 正在使用.woff版本的字体（我已排除）而不是我认为的.eot 。我使用来自fontsquirrel的@font-face 生成器来获取所有不同的字体变体，并将它们包含在我的项目中，使用的是笑脸-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 版本应用与其他浏览器世界相同的外观。老派？看起来很棒！值得吗？嗯，学到了很多东西。 ;)

于 2011-01-09T20:14:32.630 回答
18

正如Grillz所建议的，我刚刚在 IIS7 站点上托管的 Web 字体遇到了同样的问题，问题归结为 MIME 类型。

我已选择根据对 WOFF问题的 Mime 类型的答案使用“应用程序/八位字节流”。

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

WOFF MIME 类型截图

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

于 2011-03-02T14:01:05.463 回答
15

对我们来说，诀窍就是改变我们提供的 .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')
}
于 2011-05-19T17:44:47.997 回答
3

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

@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";
}
于 2011-12-06T20:32:52.450 回答
3

亚巴罗尔 +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 需要第二行。

于 2012-02-06T16:13:16.723 回答
2

好吧，既然你已经编辑了你的帖子，下面的文字就不是答案了。您是否指向正确的目录？这有可能是服务器的 MIME 类型问题吗？

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

这可能是它：

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

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

于 2011-01-05T18:23:55.227 回答
2

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

于 2011-04-21T12:46:50.117 回答
1

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

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

于 2013-05-20T18:26:41.713 回答
0

您应该查看这篇博文 Paul Irish 对您遇到的问题有一些话要说，他提出了他所谓的“防弹”@font-face 声明。

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

于 2011-04-29T15:28:29.427 回答
0

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;
}
于 2012-10-10T09:30:07.247 回答
0

我有这个问题。原来我在字体系列声明中遗漏了一个逗号。

于 2014-08-27T23:35:25.017 回答
0

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

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

于 2016-04-08T15:43:10.527 回答