ウェブフォントが楽しい
最近、アイコンをウェブフォントで表現するのにはまっています。
まだ試行錯誤の段階でどうやるのが楽ちんとか全然わかっていないのですが、並列で検証したほうが早いだろうと思って、社内の勉強会で布教してきました。
ほとんど口頭で話したのでスライドはあまり情報ないですが、一応最後に載せておきます。
ウェブフォントって何
ぐぐれ。
対応状況
多分こんな感じのはず。
メリット・デメリット
メリット
やっぱり、文字として扱えるのがどうしようもなく素晴らしい。
文字の何が良いかって、CSSでいろいろ装飾できたり、コピーができたり、検索に引っかかりやすかったりする。
ウェブフォント以前は、例えば企業サイトのページタイトルなんかを画像で表現することが多かったと思うんだけど、
『「代表挨拶」じゃなくて「社長のことば」にしてください』
『「企業情報」も「コーポレート情報」にしてくれますか？』
とか、文言の変更で画像の修正があるあるだったりしたのが、ウェブフォント使うとさくっと文言変更してあげればいいだけ。
あと『やほおが横幅変えたんでそれにあわせてウチも横幅広げてください！』
みたいなサイズの変更も柔軟にできる。拡大縮小しても劣化しないしね。
デメリット
やっぱりブラウザの対応状況と日本語でかすぎ問題が気になる。
Android2.0, 2.1がウェブフォント対応していないっぽくて、うっかりするとnofontの□が表示されるので注意が必要。
例えば、javascriptでandroidのバージョンを取得して
if ( navigator.userAgent.match(/android (2.0|2.1)/i) ) { $('body').addClass = 'non-support'; }
/* class="icon twitter" みたいな要素のbeforeでアイコンを表示するとして */ .non-support .icon:before { display: none; }
みたいな対応が必要。
日本語は、漢字を含めるとすごい量になってしまうので、使う文字だけのフォントファイル作るとかの工夫（サブセット化）が必要。
自分で頑張るなら、WebFonts として利用できるフリーの和文フォント | ヨモツネットとかからサブセット化OKなフォントを探してきて頑張る。
楽したい人は、デコもじやフォントプラスなどのウェブフォントサービスを使うと良いと思う。
サブセット化
日本語をサブセット化してくれるウェブサービスは多分まだないので、
- FontForge
- TTEdit
- サブセットフォントメーカー（使ったことないけど日本語大丈夫、なはず）
で頑張る。
英語だけなら、FontFont Subsetterみたいあ便利なサービスがあるので積極的に使いたい。
アイコンとして使う
今一番おすすめしてるのは、ウェブフォントをアイコンとして使う方法。とても使い勝手がよい。
アイコンなら一部のブラウザで非表示にしてもさして問題ないし、画像より容量小さくできるし、装飾も楽ちん。
フォントだから1色しか表現できないよ問題は、最近before, afterを使って2色アイコンまでなら実践済みでまあまあイケるはず。
グラデも背景色と同じ色ならかけれる。
