ホームページ > 記事 > ウェブフロントエンド > ライブ サイトの IE9 で @font-face が機能しないのはなぜですか?
IE8 および他のブラウザーではシームレスに機能しますが、@font-face は IE9 で表示の問題に遭遇します。この問題は特にライブ サイトで発生しますが、ユーザーのコンピュータでローカルに表示する場合には問題は発生しません。
問題の 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; }
同様の問題が報告されています。 , このフォントは、IE9 を除くすべての IE バージョンで機能します。ただし、(F12 開発者ツールを使用して) ドキュメント モードを変更すると、理想的ではありませんが、問題は解決します。
更新:
調査により、IE9 が .woff を使用していることが判明しました。意図した .eot バージョンではなくフォントのバリエーション。 fontsquirrel @font-face ジェネレーターによって生成された完全なフォント バリエーションを組み込み、スマイリーフェイス ローカル技術を使用することで、この問題は解決されました。
@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"); } h1 { font-family: "LucidaFax-bold", serif;}
さらに、Mark "Tarquin" Wilton-Jones のテキスト- IE のバージョン間で一貫したビジュアル スタイルを実現するために、シャドウ ハックが採用されています。
以上がライブ サイトの IE9 で @font-face が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。