Iconfont_html/css_WEB-ITnose について話しましょう

1. はじめに

Iconfont といえば、ほとんどの人にとっては新しいテクノロジーではないかもしれませんが、現在、多くの大規模な Web サイトが Iconfont を使用し始めています。今日は、ブロガーがその使用方法と、使用中に遭遇する可能性のある落とし穴について簡単に説明します。これに精通している学生は、見つけた場合は簡単に参照してください。問題がある場合は修正してください。

2. Iconfont とは何ですか

Iconfont とは何ですか?と尋ねる生徒もいるかもしれません。

実際、Iconfont は、アイコン、特殊フォント、その他の要素を表示するために画像ファイルを置き換えるフォント ファイルを使用する方法を指します。

それでは、どの Web サイトがそれを使用しているのでしょうか?長所と短所は何ですか?そしてそれをどのように使用するか、これらの質問に一つずつ答えてみましょう。

まず、どの Web サイトが Iconfont を使用しているかを見てみましょう。

淘宝網で使われているところ

新浪微博で使われているところ

Douban、Yitao、Want to Playなども使っているサイトがあるので貼りません興味のある学生は写真を一枚ずつ見てみましょう。

他の人がどのように使用しているかを見て、あなたも試してみたいと思いませんか?

しかし、具体的な使用法について話す前に、Iconfont の長所と短所、そしてそれがプロジェクトでの使用に適しているかどうかを理解する必要があります。

まず利点を見てみましょう:

1. 読み込みファイルのサイズが小さいです。
2. CSS のフォント サイズと色を使用してサイズと色を直接変更できます。これは、複数のサイズに拡大縮小する必要があるアイコンに適したソリューションです。
3. 影、回転、透明度など、いくつかの CSS3 テキスト効果をサポートします。
4. 下位バージョンのブラウザと互換性があります。

ただし、これにも制限があり、CSS スプライトの代替として使用することはできません。欠点を見てみましょう:

1. ベクター画像は単色のみです。
2. 生産の敷居が高く、時間がかかり、メンテナンスコストも高くなります。

これらの利点と欠点を確認した後、プロジェクトでそれを直接使用できるかどうかを判断できますが、それが理解の妨げにはなりません。 次に、その方法を見てみましょう。それを使うために。

3. Iconfont を使用します

まず、コードを記述する前に、アイコン フォント ファイルを取得する必要があります。参考までに 2 つの方法があります。

デザイナーがベクター画像をデザインし、ツールを使用して対応するフォントに直接変換できます。
サードパーティの Iconfont オンライン サービス (例: Alibaba Iconfont Platform) を使用し、フォント ファイルを生成するために設計したアイコン ベクトルを直接アップロードします。

フォント ファイルを入手したら、その使用方法について話します。 CSSでカスタムフォントを設定するのと同じように使用できます。

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">&#xe60e;</i>

Iconfont の使用中に遭遇する可能性のあるさまざまな落とし穴について話しましょう。

一部のブラウザでは、フォント アイコンが太字になるという問題が発生する場合があります。この問題を解決するには、-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; を設定します。
フォントの著作権が保護されないため、デフォルトではクロスドメインのフォント ファイルにアクセスできません。通常、必要な Web サイトを指定し、サーバー設定で同じドメインを設定します。この問題を解決するには、Control-Allow-Origin を使用します。
未使用の @font-face は含めないでください。使用されているかどうかに関係なく、IE はすべての @font-face をロードします。クソIE。
@font-face 宣言の前に script タグがある場合、IE はフォント ファイルがダウンロードされるまで何も表示しません。

興味のある学生は、ピットの周りを歩き回って、自分でピットの深さを試すことができます。ブロガーがここで紹介しますので、間違いがあればご指摘いただき、一緒に勉強してください。

このブログの記事はすべてオリジナルです、無断転載はご遠慮ください()