顧客の Web サイトにインストールされているウィジェットでフォントの素晴らしいアイコンを使用しようとしています。Font Awesome アイコンは、Safari と Chrome では正しく表示されますが、Firefox では表示されません。ただし、サイトでプレビューすると、Firefox で正しく表示されます。これは、Firefox がドメイン間でサードパーティのフォントを表示する方法と関係がありますか?
どんなアイデアでも大歓迎です。ありがとう。
注: これは、Firefox V9 以降を使用してテストされました。
Firefox は、フォントが存在するサーバーが正しい CORS ヘッダーを送信する場合にのみ、フォントのクロスドメイン リンクを許可します。http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restrictionで、仕様が非常に明確にそうするように言っているので、これを行います
おそらくFirefoxのセキュリティポリシーに関連する奇妙な動作に気づきました。次のようなプロジェクト構成でも同じ問題がありました。
ここで、font-awesome.min.css を /site/html ディレクトリの下にある html ファイルに含めて、問題を実験しました。しかし、Font Awesome パッケージをダウンロードすると、Firefox で実際に動作する HTML デモ ファイルが同梱されています。その裏技とは!?
彼らのプロジェクト構造には、「html」フォルダー内にネストされた「resources」フォルダー (「assets」と呼ばれます) があります。これは、Firefox のセキュリティ ポリシーを落ち着かせるようです。最後に、私の答えは次のとおりです。次のような構成を取得します
それは私のために働いた。
S3 でフォントをホストしている場合は、バケットで CORS を有効にする必要があります。詳細については、この他の質問に対する私の回答を参照してください
MaxCDN がこの問題を特定し、修正しました。彼らは正しい CORS ヘッダーを設定し、この行を Web サイトに埋め込むとうまくいくはずです。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Firefox は Cross-Origin Request をブロックします。
Firefox は、以下の CDN の同一生成元ポリシーにより、リモート リソースの読み取りを許可しません。
https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
CORSの問題を修正するために少し掘り下げました。代わりに、上記のCDNを以下のものに置き換え、アイコンのレンダリングを正常にしました：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
@font-face{font-family:'FontAwesome-webfont';
私を信じてください、これは本当にうまくいきます。