CSSでのiconfontの使い方を詳しく解説

このチュートリアルでは、CSS でのアイコンフォントの使用方法を詳しく説明します

アイコンフォントの最初の紹介

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

最初には登場しなかった、後の単語の iconfont もあります。これは、Web ページの制作者や研究者が、より爽やかに聞こえるようにするために与えられた、プレゼンテーション用のレイヤーです。

それでは、Alibaba の iconfont アイコン チュートリアルを次のように見てみましょう:

ステップ 1: font-face を使用してフォントを宣言します

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

ステップ 2: iconfont を使用してスタイルを定義します

.iconfont{

font-family:"iconfont" !重要 ;フォントサイズ:16px;フォントスタイル:標準;

-webkit-font-smoothing: アンチエイリアス;
-moz-osx-font-smoothing: グレースケール;}
ステップ 3: 対応するアイコンを選択し、フォント エンコーディングを取得し、ページに適用します

#x33

効果は次のとおりです

ただし、Iconfont にはいくつかの欠点があります:

ブラウザはそれを次のように扱います。テキストとレジスト エイリアシングの最適化を使用すると、結果が期待したほど鮮明にならない場合があります。 特に、システムが異なると、テキストのアンチエイリアシング アルゴリズムが異なると、表示効果が異なる場合があります。

アイコンのフォント フォントとして、アイコンの表示のサイズと位置は、font-size、line-height、word-spacing などの CSS プロパティの影響を受ける可能性があります。アイコンが配置されているコンテナの CSS スタイルはアイコンの位置に影響を与える可能性があり、調整が不便になります。 使用上不便な点があります。まず、数百のアイコンを含むアイコン フォントをロードしても、そのうちのいくつかしか使用しないと、ロード時間が無駄になります。 また、独自のアイコンフォントを作成し、複数のアイコンフォントで使用されているアイコンを1つのフォントに統合する場合にも非常に不便です。もちろん、Alibaba UX ベクター アイコン ライブラリを使用すると、この問題を解決できます

ブラウザーのサポートを最大限に達成するために、少なくとも 4 つの異なるタイプのフォント ファイルが提供される場合があります。 TTF、WOFF、EOT、および SVG 形式を使用して定義されたフォントが含まれます。自分で作ると頭が痛くなるかもしれません

上記はCSSでのiconfontの使い方の詳しい説明です。さらに関連した内容については、PHPの中国語Webサイト(www.php.cn)をご覧ください。