まだスプライトを使って小さなアイコンを作成していますか?外出中です！最もシンプルでわかりやすいアイコンフォントの使い方チュートリアルhistory_html/css_WEB-ITnose

1. アイコンフォントとは何ですか?

端的に言うと、アイコンから作られたフォントファイルのセットです（ファイル拡張子はttfwoffsvgです）。 Web ページでよく使用される小さなアイコンを作成するために使用される方法です。以下は Tmall ホームページで iconfont を使用するシナリオです:

2. iconfont を使用する利点と欠点は何ですか?

1) ファイルは小さいです。一般的に使用されるスプライト画像に数百のアイコンを配置する場合、画像のサイズは 100k 以上になる可能性がありますが、多くの場合、数百のアイコンで構成される iconfont ファイルはわずか 12 個程度です。キロバイト

2) ベクターフォントファイルなのでスケーラブルで、スプライト画像のように一定サイズまで拡大して画像の歪みがひどいということはありません

3) 欠点: 結局モノクロしか使えない、それは単なるフォントです

3. iconfont フォント ファイルを作成するにはどうすればよいですか?

まず、2 つのツールをインストールする必要があります。1 つは Adob​​e の Illustrator で、もう 1 つは FontLab Studio (クリックしてダウンロード) です。

Illustrator はデザイナーから提供された eps ベクター ファイルを開くために使用され、FontLab はフォント作成ツールです。使用方法を見てみましょう:

1) グラフィックをコピーします。 図に示すように、Illustrator を開き、デザイナーが作成したアイコンの EPS ファイルを開き、選択ツールをクリックして、キャンバス内のベクター グラフィック全体を選択し、ctrl+C を押してグラフィックをコピーします。 2)

フォントファイルを作成します。

FontLab を開き、[ファイル] > [新規] を選択し、新しいフォント編集ファイルを開き、図に示すように任意の文字をダブルクリックしてその文字のエディタを開きます:

3)

アイコンを貼り付けます。

次に、Ctrl+V を押して、Illustrator でコピーしたアイコンを FontLab の文字エディターに貼り付け、左側のツールバーを使用してズーム (ショートカット キー Ctrl+9) を適切な位置に移動または調整します

4 )

フォントをエクスポートします。

「ファイル」>「フォントの生成」をクリックして、編集したフォントファイルをフォントにエクスポートします。通常は、ttf 形式で保存します。 (FontLab が登録されていない場合、保存できないというメッセージが表示されます。Baidu を使用してクラックしてください。この記事では詳しく説明しません)

フォント ファイルが生成され保存されると、以下に示すようなフォント ファイルが生成されます。そのサイズはわずか約 3k です (アイコンを追加し続けることはできますが、k の数はあまり増えません)

4. コード内で iconfont を使用するにはどうすればよいですか?

1)CSSを導入します。 まず、このフォント ファイルを CSS にインポートする必要があります。ブラウザごとにフォント ファイルのサポートが異なるため、互換性を保つために ttf 形式を異なる形式のフォント ファイルに変換する必要があります。フォント ファイルを形式に変換するためのオンライン変換ツールは数多くありますが、私がよく使用するツールは次のとおりです: http://www.freefontconverter.com/

導入コードは次のとおりです (形式が異なると、ファイルの構文も異なります)。私はまだ使っていません）よく分からない方は、先に先輩が書いたことを参考にしてください）:

@font-face {        font-family: 'star';        src: url('star.eot'); /* 兼容IE9*/        src: url('star.eot?#iefix') format('embedded-opentype'), /* 兼容IE6-IE8 */             url('star.woff') format('woff'), /* 兼容chrome、firefox */             url('star.ttf')  format('truetype'), /* 兼容chrome、firefox、opera、Safari, Android, iOS 4.2+*/             url('star.svg#uxiconfont') format('svg'); /*  兼容iOS 4.1- */    }

2)

iconfont を使用します。

アイコンが必要な場合は、次のような疑似要素を通じて iconfont を使用します。