私のページで Web フォントとして FontAwesome (http://fortawesome.github.com/Font-Awesome/) を使用しています。
http://www.jungledragon.org/apps/jd3/
私の問題は、フォントが IE8 (標準モード) で読み込まれず、代わりに正方形のブロックが表示されることです。これらのアイコンはデザインに不可欠なので、これを修正したいと思っています。
すでに多くの質問と回答を調査したので、これをトラブルシューティングするために何をしたかをお話ししましょう。まず、このフォントを埋め込むために推奨される形式を使用しています。
@font-face {
font-family: 'FontAwesome';
src: url('../type/fontawesome-webfont.eot');
src: url('../type/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../type/fontawesome-webfont.woff') format('woff'),
url('../type/fontawesome-webfont.ttf') format('truetype'),
url('../type/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
これは、x ブラウザーでフォントをロードするためのデファクト スタンダードであり、FontSquirrel などのツールによって生成される出力と同じです。type ディレクトリは CSS ディレクトリからの相対パスであり、このフォントは IE8 を除くすべてのブラウザーで読み込まれます。
次に、クロス ドメイン オリジン (CORS) を有効にしているため、これは問題ではありません。
一部の人々は、html5 shiv をロードすると IE8 がフォントをロードするのに干渉する可能性があると示唆していますが、shiv ロードを完全に削除しても違いはありません。
このサイトは Apache2 で実行されており、MIME タイプを追加しても結果に違いはないようです。また、IE8 からダイレクト パスを使用して eot ファイルをダウンロードできることも確認できているので、ファイルに確実にアクセスできます。
何が間違っているのかわかりませんが、それは私の側にあるに違いありません。理由は簡単です。IE8 から FontAwesome の公式 Web サイトを開くと、フォントが問題なく読み込まれるからです。さらに、私が使用しているセカンダリ フォント (サイトのロゴで使用されているもの) も問題なく表示されます。2 番目のフォントは Google の Web フォントから取得されますが、fontawesome フォントはサイトと同じドメインでホストされています。
これを解決する方法についてのアイデアが不足しています。手がかりはありますか?
更新:IE開発者ツールバーに追加する必要があります。これは私が得ているエラーです:
CSS3111: @font-face で不明なエラーが発生しました。fontawesome-webfont.eot
エラーについて説明しているこの記事を見つけました：
...まだ、私を助ける解決策が内部にありません。