為什麼我的 @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中文網其他相關文章！