首页 > web前端 > css教程 > 正文

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

Susan Sarandon
发布: 2024-11-02 00:14:02
原创
410 人浏览过

Why Does My @font-face Work in All Browsers Except for 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!