21

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

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

ありがとう

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

結果: Opera Mobile でアイコンが正しく表示されるようになりました。（変更点はわかりませんが、動作します）

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

[2013-03-01 編集] Opera モバイル 10+ は @font-face をサポートしているため、別の問題かもしれません。@font-face を使用して別のサーバー フォントを試してみたところ、問題なく動作しましたが、FontAwesome ではアイコンを正しく表示できません。

ここに画像の説明を入力

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

ここに画像の説明を入力

[2013-03-4 編集] Modernizr の「font-face」機能検出を使用してフォールバックを試みましたが、opera Mobile と BlackBerry 6 はその機能をサポートしているため true を返します。 FontAwesome フォントがロードされているかどうかを検出するにはどうすればよいですか?

4

10 に答える 10

7

私が調査するいくつかの異なる問題があり、あなたがそれを修正するのを手伝ってくれることを願っています.

どのフォントが機能したかについて言及していただければ、おそらくより適切な支援ができるでしょう。あなたが言ったフォントを FontAwesome と比較して、違いを確認します。グリフが別の Unicode 領域にマップされていて、ブラウザがそこから読み取れないのではないでしょうか?

Font Forge などのツールを使用して、他のフォントとの違いを確認できます。Font Forge から FontAwesome フォントを再生成しようとしたときに、em 間隔で検証エラーが発生し、グリフにエラー (自己交差、間違った方向、極値でのポイントの欠落) があることに気付きました。アイコンフォントでこれを見たことがありますが、問題はありませんでしたが、Opera でテストしたことはありません。フォントの生成と機能するものを比較すると、おそらく問題を絞り込むことができます。

その他のこと私はあなたがカバーしたと確信していますが、再確認してください：

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

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

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

modernizr font-face feature detect のようなツールを使用すると、ブラウザー間のサポートが少し簡単になる場合があります。

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

于 2013-03-04T05:41:36.430 に答える
3

OPERA MOBILE 向けのソリューション (Opera Mini なし)

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

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

于 2013-03-06T19:15:13.970 に答える
3

Opera Mini は、公式 Web サイトhttp://www.opera.com/docs/specs/productspecs/に記載されているように、font-face をサポートしていません。

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

何かのようなもの

.icon{

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

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

アップデート

Opera mini は IOS 6.1 で FontAwesome をサポートしていません iOS でのフォントのすばらしい障害

他のフォントフェイスの例はどちらも機能しません ( http://codepen.io/bennettfeely/full/ErFGv ) ここに画像の説明を入力

しかし、SVG を使用することは優れたソリューションであり、概念の証明と思われます 元のソース: http://dbushell.com/demos/css-sprites/ 上記のデモの詳細情報: http://coding.smashingmagazine.com/2012/01/ 16/解像度非依存-with-svg/

ここに画像の説明を入力

于 2013-03-06T00:59:22.037 に答える
3

  1. http://icomoon.io/app/へ

  2. 押しボタン アイコン ライブラリ

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

  4. ご希望のアイコンをお選びください

  5. プッシュ ボタン フォント (アイコンを css font awesome にエクスポート)

  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 で動作します :)

于 2013-08-29T14:15:14.563 に答える
2

そのため、Opera Mini では @font-face がサポートされ、Andoroid では 2.2 から 3.0 までの @font-face が部分的にしかサポートされていないことがわかっています (以前の Android バージョンでは @font-face がまったくサポートされていませんでした)。参照: http://caniuse.com/fontface

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

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

于 2013-02-28T18:10:22.867 に答える
2

FortAwesome では、次のようなバグが報告されています。

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

それらはまだ修正されておらず、Opera の開発関係に連絡して原因を突き止めています。彼らがそれを修正するのを待つ以外に、多くのオプションはありません。バグを追跡して詳細を確認してください。

于 2013-03-03T12:17:40.523 に答える
1

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

<meta charset="UTF-8">

また

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

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

@charset "utf-8";
于 2013-02-28T22:13:34.047 に答える
1

参考までに、私はこの問題を抱えていて、問題はドメインでした。一部のブラウザー、特に 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;

コンテンツ タイプが間違っていると、フォントが読み込まれず、アイコンが失われる可能性があります。この情報を参考にしていただければ幸いです:)

于 2013-06-07T04:43:36.033 に答える