为什么我的 @font-face 可在除 IE9 之外的所有浏览器中使用？

@font-face 难题：在其他浏览器中运行时 IE9 中的显示问题

在一个奇怪的 Web 排版故障案例中，用户@font-face 遇到异常。该字体在除 IE9 之外的所有浏览器中都能完美呈现，让用户感到困惑。此外，该字体莫名其妙地出现在网站的本地版本上，但在实时部署时消失了。

相关网站 bigwavedesign.co.uk/gcc/gcc/ 使用以下 @font-face 声明：

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

这种异常现象让用户感到困惑，促使他们调查潜在的原因。令人惊讶的是，他们注意到另一个网站 iamthomasbishop.com 成功地在 IE9 中呈现相同的字体。确定该网站如何实现这一壮举仍然是一个谜。

最终，该问题被怀疑源于 IE9 更喜欢 .woff 字体版本而不是 .eot 版本。使用笑脸本地子例程将所有字体变体合并到项目中解决了这个问题。更新后的代码现在可以在所有 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");
  }

因此，IE9 中缺失字体的谜团已被解开，展示了在网页设计中考虑浏览器特定怪癖的重要性以及协作解决问题，克服技术挑战。

以上是为什么我的 @font-face 可在除 IE9 之外的所有浏览器中使用？的详细内容。更多信息请关注PHP中文网其他相关文章！