ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

アイコンフォント、使ってみる？

HTML5

今回はいい感じのアイコンフォントについて。欠点もありますが、今後は使って行きたいテクニックですね。

アイコンフォントってなに？

たとえばjsdo.itのメニューバー。
f:id:yuu_xxxx:20130206185415p:plain
↑ここの四角で囲ったところのアイコン、実はフォントなんです。試しに開発者ツールでこのへんのfont-faceを無効にしてみると…
f:id:yuu_xxxx:20130206185839p:plain
画像じゃなくて「あ」「い」「う」「え」「お」「か」「き」「く」になってしまいました。こういうふうに、文字に画像のようなシンボルを割り当てたものをアイコンフォントといいます。

で、これ何がいいの？

たとえば、マウスホバーしたときに、アイコンの色をじわーっと変えたいとき。従来の画像であればだいぶ手の混んだことをするか、Flashでページを組んでしまわないと無理でした。しかし、アイコンフォントを使えば、

.hoge:before {
  content: "t";
  font-face: "hogehoge-icon";
  color: #aaaaaa;
  transition: 0.5s;
}
.hoge:hover:before {
  color: #00bef6;
}

みたいにすれば、じわーっと色が変わるアイコンが簡単にできてしまいます。
また、文字の輪郭情報を元に描画するという性質から、ベクター画像と何ら変わりなく使うことができます。つまり、どれだけ拡大してもぎざぎざにならないアイコンが簡単に使える、というわけです。

合字を使って更に使いやすく

今までは上のように1文字1アイコンで作っていることが多かったのですが、これだとフォントを取得できないときは意味がわからないという問題があります。作っている側は文字とアイコンの対応表とにらめっこしてるだけで日が暮れてしまいますし、見る側はフォントがうまく表示されなかった場合、なんだかよくわからない文字が邪魔で邪魔で仕方ない、という状態になります。そこで「単語を合字にして作ったアイコンフォント」が生まれました。
Ligature Symbols

何が何やら

どういうことかというと、たとえば、いままでのアイコンフォントだと、Twitterの鳥さんにはだいたい

t

とか、もっと他のよくわからないアルファベットが割り当てられていました。一応SNSなんかはイニシャルでだいたい対応しているのですが、逆に矢印やチェックなどの記号は良くわからないアルファベットや数字に割り当てられていることが多くありました。ですが、単語を合字にしてフォント化することで、

twitter

と打てば鳥さんを出すことだできるようになります。これなら一目瞭然ですね。

欠点もあります

ただこれ、良い点ばかりではありません。

腐ってもフォント

見た目がアイコンのように見えてもフォントはフォントです。TwitterやGitHubのアイコンであれば何ら問題はありませんが、Facebookやはてなのアイコンを1文字で完全再現することはできません。理由は見比べてみれば想像がつくかと思いますが、

  • 前者は単色のアイコン
  • 後者は2色以上のアイコン

です。なので、彩り豊かなアイコンをフォント化することはできません。シンプルなものであればSVGを使うか、複雑なものであれば素直に画像を使ったほうがいいです。

大抵の場合重くなる

使うアイコンがわかっていればサブセット化*1することである程度は防げるのですが、サブセット化をライセンスで許可していないフォントもあります。こうなってくると使わないアイコンの字形も含まれてしまい、サイズが大きくなってしまいます。

対応していないブラウザがあるか、対応させるのがめんどくさい


この問題は解決に向かっています。なので将来的には問題ではなくなるでしょう。
古いiOSやAndroid、Windowns Phoneなど、モバイルを中心に対応していないものがあります。こればっかりはどうしようもありません。モバイル向けページを用意して、素直に画像のアイコンを使ったほうがよさそうです。
IEは意外にも結構昔から使うことができます。ただし独自形式なので変換してやる必要があります。IE9からは一応TrueTypeフォントも使えるのですが、なぜかよくもにょるので変換しておいたほうが無難です。変換の際にはライセンスをよく読みましょう。フリーフォントでも改変や再配布を禁止していた場合、原則として使うことができません。

使えないようになっていることも…

気軽に使えるぶん、気軽にWebフォントを使えなくする設定ができてしまうので、万人が見てくれるとは限りません。また、

Firefox 3.6.2では、Firefox 3.6で追加された「WOFF」形式フォントの展開処理に関する脆弱性を修正している。この脆弱性が悪用された場合、ブラウザーのクラッシュが引き起こされ、任意のコードを実行させられる危険がある。

というふうに、FirefoxでWebフォント絡みの脆弱性が見つかった過去もあってか、Webフォントの使用を禁止するプラグインもあります。

ここではアイコンフォントをひとつだけしか紹介していませんが、探せば微妙にテイストの違うアイコンが見つかります。最近は例のあのスタイルにインスパイアされたような見た目が流行っているので、ひょっとしたら相性がいいかもしれませんね。

*1:必要な字形を取り出して新しくフォントファイルを作ること