アイコンフォントの運用とその利点と劣勢

携帯電話端末のWeb Appプロジェクトでは、小さなアイコンが携帯電話にぼやけているという問題によく遭遇しますが、アイコンのフォント化が良い解決策があります.
アイコンフォントを使用するメリットとデメリット

1、   ：             （    Retina        ）  。         ，          ，         。    HTTP  ，     HTML5         。


2、   ：        font-size         ，          ，    、Hover  、   、        。          。      ，                          。

3、   ：             ，  IE   。

以上の利点のほかに,もちろん劣勢もある

1、              CSS3    ，              。

2、        ，         。                      。

3、             ，             

アイコンフォントの取得と使用方法
一般的には、3つの方法があります.
1、文字をHTMLファイルに直接書く.
この方法は簡単で直感的で、次のコードを見て、1つの要素で1つの文字「!」(または!)を含んで、それからこれにクラスを追加します.このアルファベットは、選択したフォントに特定のアイコンにマッピングされます.

!いいね!いいね

効果を表示するには、スタイルクラス.Iconを作成して、この文字をどのフォントで表示するかを決定する必要があります.以下のようにします.

.icon {font-family: ‘ your-incofont -name ‘;}

2、cssを使って内容を生成する;
HTMLファイルに直接文字を追加するのではなく、CSSで文字コンテンツを生成します.コードは次のとおりです.

いいね

クラス名「praise」が追加されていることがわかります.不思議なことにCSSでは、上記と同じように、最初のステップでフォントを定義し、「before擬似要素」を使用して文字アイコンを生成します.「before」は文字が左側に表示され、「after」は右側に表示されます.

.icon {font-family:’ your-incofont-name’ ;}.praise:before {content: “f00a”; }

3、data-icon属性で
HTML 5の「data」属性を使用する方法も同様です.たとえば、data-iconプロパティを作成します.aria-hidden=「true」は、リーダーが直接文字を読み取るのを防止するためであり、すべてのプラットフォームに効果的ではない.

いいね

いくつかの組み合わせで使用するCSS属性を組み合わせて、以下のコードに書くことができます.

[data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-icon);speak:none;}

ブログは本人が文章を参考にして編集して整理して、もっと多くの文章を見て、クリックして個人のブログに入ってください!