アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要

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

アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要 は今日では比較的成熟したテクノロジーであるはずです。 IconFont を分解すると、Icon と Font です。この 2 つを組み合わせるとどうでしょうか。そう、IconFontですよ～。 フォント ツールを使用して、Web 上で通常使用するグラフィック アイコン (アイコン) を Web フォントに変換します。これは、CSS @font-face を使用して Web ページに埋め込み、アイコンを表示できます。フォントはベクター グラフィックスであるため、本質的に「解像度に依存せず」、任意の解像度および PPI で完全にスケーリングでき、png や jpeg などの従来のビットマップのように拡大したり、ぼかしたりした後にエイリアスが発生することはありません。次の記事では、アイコンフォントの使用例について説明します。

アイコンフォントの使用例

1. アイコンフォントとは何ですか？ Iconfontのメリットと使い方を紹介

Iconfontのメリットとは？

サイズを自由に変更

色を自由に変更

影、回転、透明度などの視覚効果を追加できます。

IE6対応

上記の点は、オリジナルのアイコンを完全に打ち負かしています。欠点は、色が単調すぎて単色であることです。

下の画像はfont-awesomeのcssファイルの内容の一部ですが、名前からするとアイコンの定義のように見えますが、f002とf003の内容は一体何なのでしょうか？ダウンロードしたフォントファイルをフォント編集ソフトで開いてみると分かります。

2.

アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要 フォントアイコンとさまざまな小さな CSS アイコンの詳細な説明

通常、これらのグラフィックをスプライト図 (スプライト図とも呼ばれます) に切り出します

スプライト図の原理: 多数の小さな CSS アイコンを集めます。画像を 1 つの大きな画像に分割し、背景画像の位置を設定して画像を表示します。

スプライト チャートの利点: サーバー リクエストの数を減らし、サーバーの負荷を軽減します。

もちろん、これらの小さなグラフィックを作成する他の方法もあります。たとえば、上の図の Tmall で使用されているフォント アイコン アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要 です。

フォント アイコンは、名前が示すようにフォントであり、フォントと同様にベクターです。歪みなく拡大・縮小できるベクターアイコンとも呼ばれます

3.

CSSでのアイコンフォントの使い方の詳しい説明

最初はこの英語がわからなくても、何のことか分からなくても。これは、アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要 の場合、今後英語が使用されるため、フォント アイコンと呼ぶ必要があります。これにはすでに 2 つの概念が含まれています。1 つ目はフォントでなければならず、2 つ目はアイコンでなければなりません。 Web ページ上のフォントのサイズ、スタイル、変形、伸縮、デフォルト フォント、その他の属性を制御できることは誰もが知っているので、このアイコンフォントはテキストとしてスタイルに埋め込む必要があります。それはアイコンです、それは必須です それを導入するためのパスがあります まず最初に img タグを考えました。これはテキストとアイコンの両方であるため、考えられるのは @font-facecss3 属性だけです。 4.

アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要 - ベクター アイコン フォントの使用

アイコン フォントを使用してアイコンを生成すると、画像ベースのアイコンと比較して次の利点があります: 1.) サイズ変更が無料 2.) 色を無料で変更

3. ) 影効果を追加します

4.) IE6 もサポートできます
5.) 透明度、回転などの画像アイコンの他の属性をサポートします
6.) text-ストロークや背景-クリップ:テキストなどを追加できます。ブラウザーが

5 をサポートしている限り、属性。
アイコン フォント (IconFont) の作成

アイコン フォント (IconFont) は現在ますます広く使用されており、Web ページの多様性が大幅に向上し、網膜画面の歪みの問題が解決されています。 。 このプライベート メソッド (@font-face) は Microsoft によって IE4 からサポートされたと言われていますが、その後 W3 も CSS2 でこのメソッドを導入しましたが、その後 CSS2.1 で削除されてしまいました。これは非常に残念です。 CSS3 が再び導入されるまでは、それは本当に良いニュースでした。

関連する質問と回答

1. Alibaba アイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要を使用するとAndroid WeChatでは表示されませんが、iosでは表示されます

2. ローカルプロジェクトでAlibabaのアイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要フォントライブラリを展開し、アイコンフォントを追加します

3.

Iconfont アイコン作成の問題

[関連する推奨事項]

1. PHP 中国語 Web サイトの無料チュートリアル:

「CSS オンライン マニュアル」

2. PHP 中国語 Web サイトの無料ビデオ チュートリアル:

"php.cn Dugu Jiijian (2) -CSSビデオチュートリアル》

以上がアイコンフォントとは何ですか？ CSS での iconfont インスタンスの使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。