うあーろぐTOPベクターデータで軽量だと噂のアイコンフォントを導入してみた2013/02/02この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性がありますTecholdIESVGWebFontIcon-FontFont表示スピードを速くするために、ベクターデータであるSVGを用いるのは、最近よく見られる手法だと思います。古いIEなどでは、SVGはサポートが十分ではない側面があると思います。そのデメリットを解消する方法の1つとして、アイコンフォントという手法が挙げられます。気になっていたので、このブログに導入しつつどんな感じか検証してみました。アイコンフォントとはヘッダーのアイコンがそれになってます。必要なアイコンのみを選択し、それをダウンロードして埋め込む形で導入しています。generatorWebサービスを利用すれば、導入するだけならとてもシンプルです。こちらをダウンロードすると、以下の形式のフォントデータが生成されます。font)SVG形式EOT形式は、主にIEでサポートされているフォント形式です。WOFF形式は、IE9+とそれ以外のモダンブラウザでサポートされています。TTF形式は、IE9+で条件付き、とそれ以外のモダンブラウザでサポートされています。最後にSVG形式は、フォントとしてもサポートされています。今現在では(古くなっているかもしれませんが)IEとFirefox以外で概ねサポートされています。use』をご覧いただくと細かく分かるのではないかと思います。含まれており、組み込み例が掲載されていますので、そちらを参考にすると実装も素早くできると思います。これを比較的そのまま持ってきています。楽チンですね!各種ブラウザで、それに対応したフォントを使ってくれるので、実装する側も非常に楽です。アイコンフォントを使うメリットアイコンフォントを使うメリットは何が挙げられるかというと、IE6からでも使えるSVGとは異なり、一般的な方法で対応が出来るベクターデータなので、拡大縮小に強いフォントなので、テキストに対するスタイルが一通り適用出来るあたりではないかと思います。IE6から使えるというのは、先ほどの通りEOT形式でカバー出来ています。やっていることは単にテキストデータを表示するだけです。一般的な方法での対応ですね。ベクターデータというのも、テキストデータであれば当たり前ですね。大きく表示したとしても綺麗に表示することが、上の画像の通り分かると思います。テキストに対するスタイルが一通り適用出来るというのは、副次的効果として出てきます。これも同様にアイコンフォントへの適用も可能です。このあたりはKAYACさんのブログに綺麗にまとまっているので、そちらを参考になさると良いかと思います。意外と知らない?アイコンはWebフォントでつくるとこんなに便利!アイコンフォントのデメリットやってみて実感したのですが、逆にデメリットもあります。上記の通り、フォントファイルは各種ブラウザに応じて複数用意してやる必要が出てきます。自分でフォントファイルを作る必要があります。このフォントを作るという工程はかなり時間がかかると思います。(おまけに作ったフォントを複数種類に変換してやる必要も出てきます・・・。)アイコンフォントの使いどころこの手間を考えると、場合によっては導入すべき、導入すべきでないケースが出てくると思います。2〜3のアイコンをそのまま表示するだけなら、スプライト画像なりbase64でHTML・CSSに埋め込むなどした方が良さそうです。アイコンの大きさがそれほどでもなく、拡大もする必要がないのなら、ラスターデータとして持っておいて、リクエストを減らす方向へ考えた方が、**制作時間と表示時間を踏まえて考えると導入しない方が良い?**のではないかと思います。逆に、アイコンをふんだんに使い、拡大縮小の表現を多く含み、かつアイコンがCSSのスタイルでカバーできる範囲のカラーリングで収まるようなコンテンツであれば、ある程度の手間をかけて導入するのはありかなーと思います。以上を踏まえて、現状だとWebサービスを利用して導入するのが妥当で、それ以上は規模によっては割に合わないかも?という印象です。まとめさっと利用するだけならお手軽なのでおすすめですが、コンテンツの要素としてある程度多く用いるときは、制作時間と表示時間との兼ね合いで検討すべきかなーと思いました。までご一報いただけると助かります。