iconfont アイコンフォント

no_mkd

一.iconfont の長所と短所

ベクトル性

画面への適合（スケーリング）
フォント性

スタイル制御（色、影、さらには浮き出し）
ファイルサイズが小さい

通常 20-50KB で、画像よりもはるかに小さくなります。例えば typicons ライブラリには 308 個の icon があり、フォントファイルサイズは 59KB（woff）〜 147KB（svg）です

アイコンファイルは通常 1.5KB/個（Sprite は総サイズを大きくするだけです）
Sprite が不要で、修正が容易

Sprite を使用する手間が省け、修正や交換が簡単です

色の制限

iconfont は単色またはグラデーションのみ可能で、複雑なアイコンにはこの技術を使用できません（多色 iconfont を実現する方法もありますが、互換性とコストが受け入れられません）
FOUT（Flash of Unstyled Text）問題

ブラウザはまずデフォルトフォントでレンダリングし、フォントファイルのダウンロード完了後にテキストコンテンツの一部をレンダリングするため、テキストに避けられないちらつきが発生します
IE はページレンダリングをブロックします

@font-face 宣言の前に script タグがある場合、IE はフォントファイルのダウンロードが完了するまで何もレンダリングしません
パフォーマンス

IE の問題が多く、IE と FF では @fontface が window.onload をブロックします。IE では使用の有無にかかわらずロードされ、フォントのロードエラー（長時間結果が返らない）发生时、IE は 10 分間待機します（その間白画面）。他のブラウザはデフォルトフォントでレンダリングするか、一時的にコンテンツを表示しません。ダウンロード待機中はビジーインジケーターが常にトリガーされます（ステータスバー、プログレスバー、アイコン、マウスポインター）

[オプション手順]PS、png からパスをエクスポート
AI、塗りつぶし、パスを閉じて svg として保存
オンラインフォントジェネレーター
- http://www.iconfont.cn/icons/uploadShow
- http://fontello.com/

オンラインプラットフォームにアップロードし、リストビューを自動生成して管理を容易にします。例えば http://www.iconfont.cn/showProject?pid=26177

woff：W3C 推奨形式、最小サイズ、互換性は低い

Android4.4+、IE9+
ttf：Win と Mac のデフォルトフォント形式

Android4.1+、IE9+ 一部対応
eot：マイクロソフトが提案した、@fontface による OpenType フォントの埋め込みを許可

Android 非対応、IOS 非対応、IE 非対応
svg：互換性は良いがサイズが大きい

Android4.1+ 一部対応、IE9+

20 個の icon、フォントファイルサイズはそれぞれ：

IE：IE4 から eot 形式をサポート、IE9 から woff をサポート
webkit/safari：TrueType/OpenType(.ttf)、OpenType PS(.otf) をサポート、iOS4.2+ は.ttf をサポート、iOS 4.2 以下は SVG フォントのみサポート、Safari5.1+ から woff 形式をサポート
Chrome：webkit がサポートするものに加え、Chrome 6 から woff 形式をサポート
Firefox：.ttf と.otf をサポート、Firefox 3.6 から woff 形式をサポート
Opera：.ttf、.otf、.svg をサポート。Opera 11 から woff をサポート
iPad、iPhone および Android 3.0+ は SVG フォントをサポート

こちらは caniuse の結論と差異があります

@font-face 定義をすべての script タグの前に配置する
多くのフォントファイルがある場合、それらを複数のドメインに分散することを検討する
使用していない @font-face 宣言を含めない——IE は使用の有無にかかわらずすべてロードします
フォントファイルを Gzip 圧縮し、将来の有効期限ヘッダー宣言を設定する
フォントファイルの後読み込み（body 終了タグの前に配置）を検討する、特に IE 向け（IE は 10 分間フォントをダウンロードし、その間ページがブロックされる）

@fontface パフォーマンス問題の詳細については【翻訳】@font-face とパフォーマンスをご覧ください

同じドメインに配置するか、サーバーヘッダーを設定する

半ピクセルのギザギザが 1px にレンダリングされるため、css ルールを設定：-webkit-font-smoothing: antialiased;

エッジをぼかすだけでよく、css ルールを設定：-webkit-text-stroke-width: 0.2px;

iconfont の長所 > 短所、再利用性とメンテナンス性の利便性は魅力的です
フォントライブラリ生成の主な作業量は png から svg への変換です

UI チームが協力してくれれば簡単で、フォントライブラリ作成後は UI にもメリットがあり、デザイン作成がより容易になり、PS プラグインで iconfont を直接使用でき、icon を切り出す必要がありません

（実際に cc、cs6 はサポートしておらず、プラグインの品質に疑問があります。プラグインが使用できない場合、UI デザインのアイコンと iconfont の対応が小さな問題になります）
フォントライブラリの管理は問題ではありません

 http://www.iconfont.cn/users/projectは非常に便利です
互換性は問題ではありません

4 種類の形式をすべて配置すれば、互換性は十分です
パフォーマンスはあまり良くありません

しかし画像の Sprite と比較すれば十分良いです