私の @font-face が IE9 を除くすべてのブラウザで機能するのはなぜですか?

@font-face の難題: 他のブラウザーでの機能中に IE9 で表示の問題が発生する

Web タイポグラフィーの不具合という奇妙なケースでは、あるユーザーが@font-face で異常が発生しました。問題のフォントは IE9 を除くすべてのブラウザで完璧に表示されるため、ユーザーは困惑したままになります。さらに、このフォントは不可解なことに、Web サイトのローカル バージョンに表示されますが、ライブでデプロイすると消えてしまいます。

問題の Web サイト、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;
}

この異常はユーザーを困惑させ、潜在的な原因を調査するよう促しています。驚くべき発見として、別の Web サイト iamthomasbishop.com が同じフォントを IE9 で正常にレンダリングできることに気づきました。このサイトがどのようにしてこの偉業を達成したのかは依然として謎のままです。

最終的に、この問題は、IE9 が .eot バージョンよりも .woff フォント バージョンを優先していることに起因すると考えられます。 smileyface-local サブルーチンを使用してフォント バリエーションの全範囲をプロジェクトに組み込むことで、この問題は解決されました。更新されたコードは、すべての 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 で見つからないフォントの謎が解明され、Web デザインにおけるブラウザー固有の癖を考慮することの重要性と、技術的な課題を克服するための協力的な問題解決。

以上が私の @font-face が IE9 を除くすべてのブラウザで機能するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。