Webフォントでアイコンをつくろう！
ゆとりジェネレーションのほんだです。
最近、Webフォントを使用する仕事に多く携わった関係で、
Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。
ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。
（以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。）
jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS
アイコンを作成するだけだと、あまり新鮮さはありませんが、
CSS3時代のいま、これはとっても有効なマークアップ方法となっています。
詳しくは、つづきからどうぞ！
色をつける
フォントなのでCSS「color:」で指定するだけで色をつけられます。
もちろんマウスオーバー時に色を変更するのも、CSSでちょちょいと指定するだけです。
色をつける forked: jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS
画像なら複数ファイル用意する必要があるところですが、
フォントで作成しておけば色変更もとても簡単にできます。
フォトショでカラーオーバーレイをつける100倍簡単ですね。
CSS3を使えば、マウスオーバー時にむわっと色変化させたり、
アニメーションで7色に変化させる、なんてことまでできちゃいます。
大きくてもきれい
フォントはベクターファイルなので、大きくしてもきれいです。
大きくしてもきれい forked: jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS
後述もしますが、WebフォントはSVGの対応していないIE6〜8でも使えるという利点を持っています。
CSS3を駆使して色々な装飾を
CSS3の使用を前提としたサイトであれば以下のような装飾もできます。
CSS3を駆使して色々な装飾を forked: jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS
画像は使用せず、フォントとCSSだけで実現しています。
CSSだけでここまで装飾できるのであれば、
デザイナーとしても取り入れやすいのではないでしょうか。
自分のオリジナルイラストで！
以上まではjsdo.itのシンボルフォントを用いてデモをしましたが、
自分の作成したイラストもフォント化できます！（イラレでつくりました。
Webフォントイラストでつくる色々スタイリング （サル全部フォント） - jsdo.it - share JavaScript, HTML5 and CSS
実例☆
先週、弊社運営のjsdo.itが新機能リリースしました。(開発コードネーム「Mountain jsdo.it」)
投稿されたコードをカテゴリ分けするプライマリータグ機能です。
プライマリータグを表示しているボタンには
Webフォントで作成されたアイコンが使用されています。
検索機能もハイスペックになったので、是非使ってみてください！・u・
Webフォントでアイコンをつくる利点
Webフォントでアイコンをつくることの利点をまとめてみました。
CSSだけで色変更可能
色を修正をしたいときや、transitionでむわっと変化させたいときに便利です。
CSS3を使うとさらに色々
CSS3を使用できるならさらに応用の幅が広がります。
「虹色に着色してグラデーションを動かす」、「マウスオーバーで徐々にぼかす」などの画像ではできない演出も可能になります。
過去のIEにも対応（SVGはIE9以上
なんと驚き、WebフォントはIE4から対応しているそうです。
画像より軽い（ことが多い
使用の場面にもよりますが、画像より軽いことが多いです。
大きく使う場合はフォントのほうがだいたい軽いです。
複数に使うとリクエストを減らせる
フォントは1ファイルにまとめられるので、本来は複数画像を用意する所に使用すると、
サーバへのリクエストが減り、より早くWebページを表示できるようになります。
マット色を気にする必要がない
ベクターファイルなので、GIF画像やpng8画像を書き出す際のマット色を気にしなくて済みます。
Webフォントでアイコンをつくる欠点
単色のみ
お察しのとおり、写真のように色が複数になる画像はフォント化できません。
基本的にはベタぬりだけです。
HTMLの文書構造がおかしくなる
ビジュアルのためにテキストを入れるので、HTMLの構造的には適切でないものになってしまいます。
（IE8から対応の疑似クラス「:after」「:before」を使用すれば回避できます。）
ロード時にタイムラグがあることが
読み込んだ部分から表示される画像とはことなり、
Webフォントはフォントファイルが読み込み完了してから表示されます。
環境ごとにファイル形式が違う(woff, ttf, eot, otf, svg)
ブラウザやデバイスの環境によって、Webフォントのファイル形式が異なります。
多くの環境で対応させるには少し面倒です。（ファイル形式の変換ツールは後述で紹介します。）
参考サイト・ツール
Webフォントの使い方
Webフォントの指定方法の参考になります。
フォント作成ソフト
フォント形式変換
otfやttfから、woffやeotを生成できます。
画像はMac版ですが、Windows版もあるようです。
上記のWOFFコンバータと併用すれば、Webフォントに必要な全形式が揃うと思います。
フォントでつくったアイコンでエフェクト
CSS3でつくったアニメーションエフェクトが紹介されているページ。
アイコンにWebフォントを使用しているようです。
アイコンWebフォント提供サイト
アイコンWebフォントを提供しているサイトです。
コーディング推薦はじめました！
最後に宣伝！
HTMLに恋したい！「コーディング推薦」はじめました！
コーディング推薦は弊社HTMLファイ部が行っているKAYACの採用キャンペーンの一つです！
jsdo.itに掲載された課題をForkしていただき、HTMLファイ部のメンバーを「キュン」とさせるコーディングをしてくれた方を採用チームに全力で推薦します！！
愉快軽快なメンバーがあなたのForkをお待ちしています！！
（HTMLファイ部のTwitterもヨロシク！）