問題タブ [icon-fonts]

Fontastic.me を使用してアイコンフォントを作成しました。Android 4.2.2 および 4.3 のネイティブ ブラウザー (例: 最新の Samsung タブレット) を除いて、うまく機能します。これらのブラウザでは、フォント全体の文字に幅がありません。これは、Fontastic.me で作成されたすべてのフォントで発生します (Fontastic.me 自体が提供するフォントであっても)。これは、アイコンを (水平方向に) 中央に配置する際の大きな問題です。

テストするために Web ページをセットアップしました: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html。ピンク色は文字の幅を表しています。次のスクリーンショットは、通常の動作と AndroidBrowser の動作を比較しています: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png

Icomoon を fontgenerator として使用すると問題が発生しないため、Fontastic のおかげだと確信しています。所有者にも通知しましたが、Mac に Android Emulator をインストールする方法がわからないため、調べることができないとのことです。

ここで何が起こっているのか、手がかりを持っている人はいますか? 文字スペースが崩壊する原因は何ですか?

Web ページでフォント フレームを使用したいと考えています。フォント フレームはBrownstoneフォント フレームのようなもので、たとえば e の文字を入力すると大きな巻き毛のフレームになります。これらのフレームを Web ページの画像の周りに配置したいと考えています。

私が考えることができる明白な方法は、 @fontface を使用してブラウンストーンフレームのフォントファミリを持つクラスでスパンに文字 e を入力し、そこからスタイルを設定することですが、純粋に css でこれを行う方法はありますか?悪いマークアップのように見えるスパンに e を入力する必要はありませんか?

同様の質問は見つかりませんでしたし、私が提案したよりも良い方法もわかりませんでした。

フォント アイコンの代替が必要です。そこで、SVG アイコンを作成することにしました。Grunt と https://github.com/jkphl/grunt-iconizrを使用しています。すべて正常に動作します。Grunt Iconizr を使用した出力 SCSS ファイルがあります。

初め

2 番目の出力ファイル、最初のファイルの代替:

アイコンにホバー効果を作成したい。純粋な CSS ソリューションを使用してホバー効果を行う方法はありますか? プロパティを使用してそれを行うことができることは知っていfill: #CCC;ます...ただし、HTMLコードにSVGがある場合のみです。フォント アイコンを使用する場合は、CSS の color プロパティを変更することで簡単に実行できます。によって添付されたSVGの色を変更する方法はありますbackground-image: url(...)か?

Web ページに人口統計アイコンを埋め込むためのカスタム フォント フェイスがあり、各アイコンの「data-msg」要素の周りのリンクに追加情報が保存されています。問題は、link プロパティのユニバーサル CSS 割り当てを使用しないと、これらのマウスオーバー メッセージの CSS を定義できないように見えることです。これにより、ページ上のすべてのリンクが奇妙に見えます。

CSS 効果をこれらのアイコンだけに制限するにはどうすればよいでしょうか?

私はjsfiddleで私の問題の実例を作成しました(これは純粋なcssの問題ですが): http://jsfiddle.net/V6vpM/1/

コードは次のとおりです。

CSS

CSS -- クラス内にある必要がある部分は次のとおりですが、これを行うと、マウスオーバー効果が壊れます。

HTML は次のとおりです。