3

ここに画像の説明を入力

上記のこのページ ( http://www.jungledragon.org/apps/jd3/all/recent ) を Android 版 Firefox バージョン 28 でレンダリングしたものをご覧ください。問題はすぐにわかります。これらの醜いブロックはすべて、アイコンフォント「FontAwesome」。

これは、それらがレンダリングされない唯一のブラウザーです。Android 版 Firefox から FontAwesome Web サイトにアクセスすると、そこにあるアイコンが問題なくレンダリングされるため、問題は私のセットアップのどこかにあります。もう 1 つの有用な手がかりは、「JungleDragon」のロゴが問題なくレンダリングされることです。これは、Google から提供されている Web フォントです。

この失敗の考えられる理由を除外しようとしています。これにより、いくつかの試み:

Amazon S3 アカウントで FontAwesome のコピーをホストし、そこに CORS ポリシーを設定してクロスオリジンリクエストを許可していました。これが原因ではないことを確認するために、現在、同じドメインでフォントをホストしています。違いはありません。

次に、フォントへの相対パスから絶対パスに変更しました。これも大差ありません。

このサイトは、次のコンテンツ タイプを追加した Apache でホストされています。

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType font/woff                        .woff

この最後の行は以前は異なっていましたが、レンダリングする Google フォントのコンテンツ タイプと完全に一致するように変更しました。これも大差ありません。

すべての試行で、毎回キャッシュを完全にクリアしたので、それも問題ありません。

このフォントは、他の Android ブラウザー (Chrome、Dolphin) だけでなく、Firefox を含む、私が知っているすべてのデスクトップ ブラウザーでも問題なくレンダリングされることに注意してください。

これが私のフォント宣言です:

@font-face {
  font-family: 'FontAwesome';
  src: url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.eot'); 
  src: url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.eot?#iefix') format('embedded-opentype'), url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.woff') format('woff'), url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.ttf') format('truetype'), url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

これは、FontAwesome をロードするデフォルトの方法です。多くのバリエーション(SVGを最初にロードするなど)を変更しましたが、すべて役に立ちませんでした。

このフォントを Firefox for Android でレンダリングできない理由について、私は今、完全に途方に暮れています。

4

1 に答える 1

2

リモート デバッグを使用して、デバイスの Firefox の Web コンソールにアクセスできました。Firefox が CORS について不平を言っていたことが判明しました。フォントがページと同じドメインでホストされているため、これは奇妙です。それでも、PHP から CORS ヘッダーを適用することで、問題を解決できました。

于 2014-03-22T15:22:47.667 に答える