web-dev-qa-db-ja.com

一部のブラウザでFont Awesomeアイコンが機能しない

私はBootstrap + Font Awesomeを使用しており、ほとんどのデスクトップおよびモバイルブラウザで問題ありませんが、Font awesomeアイコンはoperaモバイル、Opera Mini、およびAndroidブラウザのバージョン。空白の長方形のみを表示します。

誰もがその問題を知っていますか？そして、解決策はありますか？

ありがとう

[EDIT 2013-03-06！重要]明らかな問題が見つからなかったため、前代未聞の解決策を試してみました。 2つのオンラインフォント変換ツールを試しました。最初に http://www.freefontconverter.com/ を使用して、元のFontAwesome svgをttfに変換しました。次に、 http://www.font2web.com/ を使用して、その.ttfを.eot、.woof anf .otfに変換しました。

結果：opera mobileはアイコンを適切に表示するようになりました。（変更点はわかりませんが、動作します）

問題はBlackberry 6です。 BB Curve 9300、Modernizr、Googleフォントで@ font-faceをテストしましたが、すべて問題ありません。しかし、FontAwesomeはまだ動作しません...

[EDIT 2013-03-01] Opera mobile 10+は@ font-faceをサポートしているため、別の問題が発生している可能性があります。 FontAwesomeでは、アイコンを適切に表示できません。

enter image description here

[編集2013-03-03]問題は私のWebサイトだけではなく、Font Awesome Webサイトの例とテストが機能していません...

enter image description here

[EDIT 2013-03-4]Modernizr "font-face"機能検出を使用してフォールバックを試みましたが、opera MobileとBlackBerry 6は、その機能をサポートしているためtrueを返しますFontAwesomeフォントがロードされているかどうかを検出する方法は？

css3blackberrytwitter-bootstrapfont-awesomeopera-mobile
21
Gonzalo

私はあなたがそれを修正するのを手伝うことを望んでいる私が検討するいくつかの異なる問題があります。

どのフォントが機能したかについて言及していただければ、おそらくもっと役立つでしょう。 FontAwesomeで使用できると言ったフォントを比較して、違いを確認します。グリフが別のユニコード領域にマップされていて、ブラウザがそこから読み取れないのではないでしょうか？

Font Forgeなどのツールを使用して、他のフォントとの違いを確認できます。 Font ForgeからFontAwesomeフォントを再生成しようとすると、em間隔で検証エラーが発生し、グリフにエラー（自己交差、間違った方向、極値の欠落点）がありました。私はアイコンフォントでこれを見たことがあり、問題は一度もありませんでしたが、Operaのいずれかでテストしていません。ダウン問題。

その他の項目あなたがカバーしていると確信していますが、二重チェック：

ここで、ローカルバージョンのフォントがインストールされていると、フォントの埋め込みと競合する可能性があることを読みました。 https://github.com/FortAwesome/Font-Awesome/issues/247

アイコンフォントを使用して独自のグリフを追加し、フォントリスなどを使用してすべてのWebセーフ形式を生成した場合は、作成したグリフのUnicode範囲を追加するようジェネレーターに指示したことを確認してください。これを行うのを忘れると、アプリはa-z範囲のグリフのみを追加しました。チェックする簡単な方法は、デモhtmlページのgyphsタブを見て、すべてのアイコンが含まれていることを確認することです。

適切なCSS3フォントフェイスルールを使用し、eot、ttf、woff、およびsvgを埋め込み、少し待っています。一部の古いiphoneでは、フォントの表示に永遠に時間がかかることに気付きました。

Modernizr font-face機能検出などのツールを使用すると、ブラウザー間のサポートの一部が少し簡単になる場合があります。

私は問題が何であるかを知りたいです。

7
Jesse

ソリューションOPERA MOBILE（No Opera Mini）

2つのオンラインフォント変換ツールを試しました。最初に http://www.freefontconverter.com/ を使用して、元のFontAwesome svgをttfに変換しました。次に、 http://www.font2web.com/ を使用して、その.ttfを.eot、.woof anf .otfに変換しました。

最後に、元のファイルを置き換えて、Operaモバイルでアイコンが正しく表示されるようになりました。

3
Gonzalo

Opera Miniは公式ウェブサイトで言及されているように、フォントフェースをサポートしていません http://www.opera.com/docs/specs/productspecs/

私が考えることができる1つの「汚い」小さなトリックは、フォントをSVGに変換し、CSSで使用することです部分的にサポートされています（彼らのウェブサイトでも書かれています） ）。

何かのようなもの

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

上記のリンクもご覧ください http://www.w3.org/TR/SVGTiny12/fonts.html

[〜＃〜] update [〜＃〜]

Opera miniはIOS 6.1ではFontAwesomeをサポートしていません font awesome fault in ios

他のフォントフェイスの例も機能しません（ http://codepen.io/bennettfeely/full/ErFGv ） enter image description here

しかし、SVGを使用することは優れたソリューションであり、概念の証明元のソース： http://dbushell.com/demos/css-sprites/ 上記のデモの詳細： http：/ /coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

enter image description here

3
vorillaz

  1. http://icomoon.io/app/ に移動します

  2. プッシュボタンアイコンライブラリ

  3. ライブラリFont Awesomeを追加

  4. 必要なアイコンを選択してください

  5. プッシュボタンフォント（アイコンをCSSフォントにエクスポートします）

  6. Fonts Awesome（ttf、svgなど）を新しいFonts Awesomeに置き換えます

CSS

 @font-face{
font-family:"FontAwesome";
src:url('../fonts/awesome/fontawesome.eot');
src:url('../fonts/awesome/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/awesome/fontawesome.woff') format('woff'),    url('../fonts/awesome/fontawesome.ttf') format('truetype'),
        url('../fonts/awesome/fontawesome.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"\f024";}.mobile:before{content:"\f10b";}

これを試してみると、Awesome FontsはOpera Mobile :)で動作します

2
Frin

このようなバグはFortAwesomeで報告されています：

  1. https://github.com/FortAwesome/Font-Awesome/issues/246
  2. https://github.com/FortAwesome/Font-Awesome/issues/791

それらはまだ修正されていません。Opera devリレーションに連絡して、これが原因である原因を見つけました。修正を待つ以外に選択肢はありません。詳細をご覧ください。

2
user568109

そのため、Operaで@ font-faceのサポートがあり、2.2から3.0のAndoroidでは@ font-faceの一部のみがサポートされています（以前のAndroidバージョンには@ font-faceのサポートがまったくありませんでした。参照： http://caniuse.com/fontface

私が知っていることからの部分的なサポートは、DRMで保護されたフォントをサポートしておらず、「スマイリー」構文などの一部の構文が機能しなかったことを意味します。

Opera MiniおよびAndroid 2.1にアイコンを表示したい場合は、画像アイコンにフォールバックする必要があります。Android 2.2-3.0では、おそらく構文を変更することで修正できます。

2
Alexey Ivanov

おそらくこれは文字セットに関連していますか？ドキュメントとスタイルシートでUTF-8を宣言していますか？

<meta charset="UTF-8">

または

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

およびスタイルシート（注、最初の行、最初の列でなければなりません）：

@charset "utf-8";
1
dusthaines

参考として、私はこの問題があり、問題はドメインでした。一部のブラウザー、Firefoxは、特に（別のドメインポリシーと呼ばれる）別のドメインからのフォントの読み込みを拒否します。ヘッダー

Access-Control-Allow-Origin "*"

たとえばnginxでは、これは次のように構成されます。

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

設定する必要があります。また、フォントのコンテンツタイプは

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

コンテンツタイプが間違っていると、フォントがロードされないため、アイコンが失われます。参照としてこの情報を持っているのは良いことです:)

1
Guillermo Siliceo Trueba

icomoon app http://icomoon.io/app/ を使用して、svgフォントをWebフォントに変更し、Font Awesomeの古いフォントを置き換えます。 opera mobile

0
Misikir

私も、SVGフォントをBlackberryで表示するのに問題がありました。問題は、（ドキュメント内の）svgの名前とフォントファミリーの名前が同じでなければならないことです。最後の回答へのコメントで、この回答を見つけました：

blackberry os 7の@fontface

0
emik