ホームページ > ウェブフロントエンド > CSSチュートリアル > ライブ サイトの IE9 で @font-face が機能しないのはなぜですか?

ライブ サイトの IE9 で @font-face が機能しないのはなぜですか?

Barbara Streisand
リリース: 2024-11-01 11:44:02
オリジナル
700 人が閲覧しました

Why is My @font-face Not Working in IE9 on a Live Site?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート