首頁  >  文章  >  web前端  >  為什麼我的 @font-face 規則無法在 IE9 中顯示字體?

為什麼我的 @font-face 規則無法在 IE9 中顯示字體?

Linda Hamilton
Linda Hamilton原創
2024-11-02 17:46:02742瀏覽

Why Won't My @font-face Rule Display Fonts in 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn