アイコンフォント(IconFont)production_html/css_WEB-ITnose

IconFont の紹介

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

しかし、モバイル端末や PC の IE で使用しても大丈夫かとよく尋ねられますが、責任を持って「もちろん」と言えます。理由は上記で述べたように、@font-face はもともと Microsoft IE のプライベート メソッドであったため、IE4 からサポートされていました (テストはしていません)。しかし、現在、Web サイトは少なくとも IE6 をサポートしており、IE6 は正常に通常にダウングレードされています。 Web サイトを使用する場合、互換性を持たせるために UI を復元する必要はなくなります。また、実際のプロジェクトで IE6 を使用することも問題ありません。

一言で言えば、PC やモバイル端末でアイコン フォント (Iconfont) を安全かつ大胆に使用できるようになりました。
詳細については、中国最大かつ最も完全な適切なアイコンのライブラリである Alibaba IconFont Web サイトをご覧ください。

アイコンフォント制作

1. IcoMoon

検索するチュートリアルはたくさんありますが、IcoMoon-Free をアップロード、編集、選択して直接ダウンロードして使用するのは非常に便利で迅速な方法です。
ウェブサイト: https://icoon.io/app/

2. Ali IconFont

と IconFont は同様の機能を提供します
ウェブサイト: http://iconfont.cn/

上記 2 つの方法の利点は、便利で速いですが、場合によっては個人のニーズを満たさないこともあります。
例: 既存のアイコンを置き換えるだけで文字コードは変更しない場合、またはよりパーソナライズされたニーズがある場合は、以下の方法を検討してください。

3. フォント編集ソフトの作成

1. まず、PSとAIに加えて、High-Logic FontCreatorが必要です。 FontCreator は強力なフォント編集ソフトウェアです。 公式ウェブサイトのダウンロード: http://www.high-logic.com/font-editor/fontcreator/download.html
   

2. PS アイコンのパスを AI にエクスポートします (アイコンはパスである必要があります)
   

3. AIエクスポートされたアイコンのパスを開きます (開くと空白になる場合があります。すべてを選択して色を検索して追加できます)
   

4. FontCreator を開き、新しいフォントを作成するか、開いたフォントを作成します
   

5. アイコンのグリフを追加するか、ダブルクリックします編集するアイコンのグリフ
   

6. アイコンのパスを FontCreator にコピーし、サイズと位置を調整します (http://mux.alimama.com/posts/1025) を参照してください。 EOT、TTF2SVG TTF2EOT
   
   

7. それでは、もう終わりにします。

   
   

8.