アイコン フォント ゲームプレイ コレクション_html/css_WEB-ITnose

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

----------利点---------

• 薄くて軽い、小さなフォント ファイル、通常 10 ～ 30kb (Word で圧縮) Spider)
• 互換性があり、透明で、IE6 と完全な互換性があります
• 完全にホバー、クリック、その他のインタラクティブな効果に便利です
• 多用途、ベクトル、ズーム時に変形しません、色の変更が簡単、サイズ
• は静かで、base64 エンコードを通じてスタイル シートに配置され、画像リクエストは生成されません。

CSS での IconFont の実装は主に @font-face に反映されます。 @font-face は CSS3 のモジュールですが、IE4+ ではサポートできます。 @font-face は主に、独自に定義した Web フォントを Web ページに埋め込みます。

このようにして、Web 開発中に Web セーフ フォント以外のフォントを使用することができます。また、一般的に使用されるいくつかのアイコンと同様に、それらをフォントフェイスとして定義することもできます。これにより、カスタム フォントを簡単に使用したり、その色やサイズを簡単に変更したりできるようになります。写真をカットする手間を大幅に節約します~

この記事は主に私の学習と実践の一部を記録します-。 -

文法規則

@font-face{    font-family:<YourWebFontName>;    src:<source>[<format>];    [font-weight:<weight>];    [font-style:<style>];}

値の説明:

• YourWebFontName はカスタマイズしたフォント名を指します。できればデフォルトのフォントを使用してください。ダウンロードされ、Web 要素のフォントファミリーで参照されます。
• source: カスタマイズしたフォントのストレージ パスを指します。相対パスまたは絶対パスを指定できます。
• format: カスタマイズしたフォントの形式を指します。これは主にブラウザーがフォントを識別するのに役立ちます。その値には主に、truetype (.ttf)、opentype (.otf)、truetype-aat、embedded-opentype、avg などの型が含まれます。
• ウェイトとスタイル: これはおなじみのはずです。ウェイトは太字かどうかを指し、スタイルは斜体などのフォント スタイルを指します。

format にはブラウザのサポート問題が関係するため、ここでは各形式のブラウザ サポートについて説明します。

• .ttf【IE9+,FF3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
• .otf【FF3.5+,Chrome4.0+ 、Safari3.1以降、Opera10以降、iOSモバイルSafari4.2以降】
• .woff(Webオープンフォント形式)【IE9以降、FF3.5以降、Chrome6.0以降、Safari3.6以降、Opera11.1 +】
• .eot (Embedded Open Type).eot は IE 専用のフォントです。この形式のフォントは .ttf から作成できます [IE4+]
• .svg は SVG をベースにしたフォントです。レンダリング形式 [Chrome4.0+, Safari3.1+, Opera10+, iOS Mobile Safari3.2+]

上記で紹介したブラウザのサポートによると、@font-face には次のように記述する必要があります。複数のフォント形式を使用して、より多くのブラウザ バージョンをサポートできます。

---

理論が終わったら、実践を始めましょう

---

まず、専用フォントを入手します。特殊なフォントを入手するには、有料の Web サイトを見つけるか、自分で検索してダウンロードするしかありません。もちろん、後者を選択することがよくあります~Dafont.com ここでフォントを探すことがよくあります。

フォントが見つかりました。ブラウザのサポートをさらに増やすには、さまざまなフォント形式が必要です。ここをクリックすると、次のインターフェイスが表示されます。

フォント形式変換

[フォントをアップロード] ボタンをクリックし、コンピューターに保存されている特別なフォントをアップロードし、変換する形式を選択して、[契約] の横のボックスにチェックを入れてから、[キットをダウンロード] ボタンをクリックして、必要なフォントが利用可能です。

私の実践

1. フォントは、前述のように Dafont.com でダウンロードできます。 2. 必要なフォントを fontsquirrel.com で変換します。以下の図に示すフォントが含まれます

フォント ファイル

css:

html :

ページ:

---

上記に加えて、 Web 上のローカル フォントを使用して、@font-face でアイコンをフォントにすることもできます。フォントアイコンについては、実際の仕事で経験が豊富なので、アイコンを小さくカットする必要がなく、背景の位置を計算する必要もなく、サイズや色も自由に変更できます。とても嬉しいです。

まず、いくつかのアイコン フォントをお勧めします。

• iconfont これは、淘宝網アイコンを含む Alibaba M2UX のアイコン フォント アイコン フォント ライブラリです。ライブラリとAlimamaアイコンライブラリ。

• fontello.com では、独自のアイコン フォントをオンラインでカスタマイズできます。また、アイコン セット全体を GitHub から直接ダウンロードすることもできます。

• icomoon は、SVG 形式のフォントをオンラインでインポートし、編集してダウンロードして使用できます。

• グリフィコン ハーフリングはブートストラップで無料で使用できます。 200以上のアイコンが付属しています。

• font-awesomeFont Awesome は、アイコン画像を Bootstrap Icon に基づいたフォントに変更したフォントの強力な例です。

フォント アイコンを使用する必要がある場合、もちろん、最初にこれらの Web サイトから直接ダウンロードすることを選択します (または、他の Web サイトを自分で探索することもできます。共有を歓迎します~)。ダウンロードされた圧縮パッケージには通常、さまざまな形式のフォント、既製の CSS ファイル、HTML デモが含まれています。直接使用してください。

これらの Web サイトが私たちのニーズを満たせない場合は、自分でいくつかのフォントを作成する方法を学ぶ必要があります。

独自のフォントの作成方法 1. fontlab ですが、このアプリケーションは有料であり、安価ではありません。 2. fontcreator (無料) が最も一般的に使用されます。クリックすると、fontcreator の具体的な使用方法が表示されます。独自のフォントを作成した後の使用方法は、上記と同じです~

参考資料 CSS3 @font-face