上記のこのページ ( 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 でレンダリングできない理由について、私は今、完全に途方に暮れています。