Webfontについてちょっと調べてみた

↓を読んで「ん?」って思ってブコメを読んでちょっと納得して少し知らべて思ったことのメモ

重いんじゃね?

ベクターファイルだから基本的には軽くなることが多いらしい。自分で作ったこと無いからわからないけど、ベクターファイルでできてるんであれば大きな画像になればなるほど軽くなると思う。ただし結局はフォントセットを丸々ダウンロードすることになるから1箇所だけWebfontを導入してIcon作ってみましたとかだと重くなると予想できる。やるなら画面で使っているiconをすべてwebfontに変更してその組み合わせだけのフォントセットとかを作ってやれば軽くなるんじゃないかと思う。そうすればCSS Spriteと同じような効果が発揮されるんじゃないかと想像。

色付けれないんじゃね?

fontだから色付けられないんじゃないかと調べてみたらやっぱりそうみたい。基本的に装飾はCSS3で装飾してtext-shadowつけたりcolorで色変えたりとかそこら辺で頑張るのが普通っぽい。iconとか簡単かつ単色で問題ない画像ならいいだろうけど複雑で単色ではないものを実現したいときはwebfontを使うのは無理。relativeとかで重ねればなんとかなるのかもしれないけどそこまでの労力を払うなら画像用意したほうがよっぽどいい。

SEO的にどうなの?

Webfontって本来は普通の文章を装飾するためにあるものだからSEO的には全然ダメだと思う。普通に文章書いてて特殊なフォントで記載したタイトルとかを出したいからしょうがなく画像を使ってますとかそういうサイトならSEO的にいいと思うけど、今回の使用方法を考えると全然ダメ。これなら画像にaltをきっちり書いたほうが機械も理解しやすいだろうからそっちのほうがいいんだろうと想像。

Fontファイルがダウンロードされなかったら終わりじゃね?

普通にブコメでも突っ込まれてたけどそうだよなーって思う。webfontって単なるフォントだからaっていう文字コードがきたら☆っていうものを表示してねっていうだけの技術なんでわけわからないものが見える可能性がある。だけどちょっと考えると、リストのiconを表示したいんだったら上から順番に1,2,3,4とかいう数字に表示したいものを割り当てればダウンロードされなかったとしても普通に見えるだろうし、twitterのマークをtに割り当てるとか文字と画像が何となく分かる組み合わせだったら問題ないのかも。

まとめ

つらつらと書いてみたけどWebfontは文字の装飾で使うべきで画像の代わりに使うものではないと思う。でもいっぱいアイコンを使わなければならないサイトとかならダウンロードされなかった場合に表示される文字と画像とがつながっているのであればお気軽に使えるCSS Spriteの代わりとして使うのもありなのかなーって思った。僕としてはSVGでブラウザに画像書かせようぜ!っていうほうがメリットが大きいんじゃないかなーって思う。

参考