私のウェブサイトwww.jungledragon.comでは、アイコン フォント「FontAwesome」を多用しています。今週、システムを Windows 8.1 にアップグレードしました。これには IE11 がインストールされています。FontAwesome フォントが完全に読み込まれず、ブラウザー コンソールに次のエラーが表示されることに気付きました。
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: fontawesome-webfont.eot
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
File: fontawesome-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. File: fontawesome-webfont.ttf
私の場合、Amazon S3 で実際のフォント ファイルがホストされているため、これらのエラーはクロス オリジン アクセス許可に関連しています。
ただし、ここで奇妙なことがあります。問題のバケットに適用された CORS ポリシーがあり、これは常に機能しています。さらに調査を行うために、IE11 をさまざまなドキュメント モード (IE10、IE9、および IE8) に入れてみました。どのような場合でも、フォントの読み込みに失敗します。私が Windows 8 を使用していたときは、IE8、9、および 10 でも問題なく動作していたので、これは奇妙です。
ドキュメント モードの代わりに実際のネイティブ ブラウザ バージョンを使用して、ブラウザスタックを使用していくつかの実際のテストを続けたため、これらのドキュメント モードは実際には役に立たないようです。Windows 7 と 8 の両方で、フォントは IE8、9、10、および IE11 プレビューでも正常に読み込まれます。
私は今、問題がどこにあるのか少し迷っています。問題は具体的には Windows 8.1 の結果ですか (私にはそう思われますが、ブラウザスタックでテストできず、利用できません)? それとも、IE11 の最終バージョンだけの問題なのでしょうか? もしそうなら、なぜすべてのドキュメントモードで問題になるのですか?
注: テストに協力したい場合は、Web サイトでフォントが読み込まれるかどうかを簡単に確認できます。グローバル ナビゲーション バーには、サイトの他のいくつかの領域と同様にアイコンがありません。