ホームページ > 記事 > ウェブフロントエンド > Iconfont_html/css_WEB-ITnose について話しましょう
1. はじめに
Iconfont といえば、ほとんどの人にとっては新しいテクノロジーではないかもしれませんが、現在、多くの大規模な Web サイトが Iconfont を使用し始めています。今日は、ブロガーがその使用方法と、使用中に遭遇する可能性のある落とし穴について簡単に説明します。これに精通している学生は、見つけた場合は簡単に参照してください。問題がある場合は修正してください。
2. Iconfont とは何ですか
Iconfont とは何ですか?と尋ねる生徒もいるかもしれません。
実際、Iconfont は、アイコン、特殊フォント、その他の要素を表示するために画像ファイルを置き換えるフォント ファイルを使用する方法を指します。
それでは、どの Web サイトがそれを使用しているのでしょうか?長所と短所は何ですか?そしてそれをどのように使用するか、これらの質問に一つずつ答えてみましょう。
まず、どの Web サイトが Iconfont を使用しているかを見てみましょう。
淘宝網で使われているところ
新浪微博で使われているところ
Douban、Yitao、Want to Playなども使っているサイトがあるので貼りません興味のある学生は写真を一枚ずつ見てみましょう。
他の人がどのように使用しているかを見て、あなたも試してみたいと思いませんか?
しかし、具体的な使用法について話す前に、Iconfont の長所と短所、そしてそれがプロジェクトでの使用に適しているかどうかを理解する必要があります。
まず利点を見てみましょう:
これらの利点と欠点を確認した後、プロジェクトでそれを直接使用できるかどうかを判断できますが、それが理解の妨げにはなりません。 次に、その方法を見てみましょう。それを使うために。
3. Iconfont を使用します
まず、コードを記述する前に、アイコン フォント ファイルを取得する必要があります。参考までに 2 つの方法があります。
font-face フォント宣言:
1 @font-face {font-family: "iconfont";2 src: url('iconfont.eot'); /* IE9*/3 src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */4 url('iconfont.woff') format('woff'), /* chrome, firefox */5 url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/6 url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */7 }
異なるブラウザーが異なるフォント ファイルを呼び出すことがわかります。
Iconfont のスタイルを定義します:
1 .iconfont {2 font-family:"iconfont" !important;3 font-size:16px;4 }
フォント サイズ font-size と独自の色を通じて、アイコンのサイズと色を変更できます。サンプル画像は次のとおりです:
アイコンに対応するフォント コードを選択し、ページに適用します:
<i class="icon iconfont"></i>
Iconfont の使用中に遭遇する可能性のあるさまざまな落とし穴について話しましょう。
このブログの記事はすべてオリジナルです、無断転載はご遠慮ください()