为什么我的 @font-face 规则无法在 IE9 中显示字体？

IE9 中的 @font-face 显示问题

您遇到了 @font-face 规则在 Internet Explorer 中不显示字体的问题9 (IE9)，即使它们可以在其他浏览器（包括 IE8）中运行。此外，这些字体在本地查看时可见，但在网站实时托管时不可见。

相关网站是 bigwavedesign.co.uk/gcc/gcc/，@font 所使用的 CSS 代码-face 规则是：

<code class="css">@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;
}</code>

显然，这个问题似乎并不是一个孤立的案例，因为其他人也报告了类似的问题。 IE9 和其他浏览器之间的主要区别在于 IE9 似乎使用 .woff 版本的字体，而不是其他浏览器使用的 .eot 版本。这导致了一个解决方案，其中 .woff 版本包含在项目中，从而使字体在所有 IE 版本中都能正常工作。

以下修改后的 @font-face 规则包含 .woff 版本，并报告给解决问题：

<code class="css">@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");
  }</code>

通过在@font-face规则中包含.woff版本，可以确保字体在IE9中正确显示，同时保持与其他浏览器的兼容性。

以上是为什么我的 @font-face 规则无法在 IE9 中显示字体？的详细内容。更多信息请关注PHP中文网其他相关文章！