和文Webフォントを使った際のメモ
web更新から画像文字の面倒を解消してくれるだろう、Webフォントを使ってみたので、メモ。
前提
使用するのはページ見出し部分。本文には使わない。
使ったのはライセンスに問題がない条件を満たせば使える、IPA系のフォント。ここでの例として、IPAex明朝。TTFフォントそのままだと7.47MBもあり、いくら回線が速くなったとはいえども、実用的ではない。
容量を小さくする
そこで必要な文字だけを抜き出したサブセットを作る。使わせていただいのは株式会社 武蔵システム様の「サブセットフォントメーカー」。ありがとうございます。
必要な文字の選定は、見出し限定だったら、サイトマップを作ったついでに見出し文を抽出するのが最小。汎用的に使いたい場合は、第一水準漢字に限定。第2水準漢字以降は、頻度の少ない人名地名などで使われる文字だけなので、見出し文に使われることは、まずないとする。
第一水準漢字と英文、各種記号とかを足すと3,671文字になった。これを使ってサブセットを作る。
すると、TTFファイルで、1.09MBまでサイズが落ちた!約15%にもなる縮小だ。
Webフォント用で一番多く使われるwoff形式だと更に小さくて、765KB。IEが使うeot形式は687KB。
これならちょっと大きめの画像ぐらいなので、十分実用レベル。実機でも許容範囲であると確認済み。
WebフォントにCSS3で装飾を加えると見栄えも十分だし、スマートフォンなどでピンチインして拡大しても滲まないのは、とても気持ちがいい。CMSなどで動的に変化する見出しに使えるのは、画像フォントを使った場合のめんどくささや、システムフォントを使った貧相さから思えば、感激ものだ。
WindowsPCで困る
ただ、意外な落とし穴があった。小さな文字が、WindowsPCだと表示が汚いのだ。使えないのではない。対応しているのだけど、25pxより小さな文字サイズでは、アンチエイリアスが有効になってくれなず、ジャギーでまくり。これはIEだけでなく、Firefox、Chromeなど他のブラウザでも変わらない。例外的にWindows8.1のIE11だけはちゃんとアンチエイリアスがかかっていたけど、これは少数。同じWindows8.1でもFirefox、Chromeは未対応。Windows7のIE11でも駄目。(Windows8のIE10,11は環境が手元にないので未確認)
MacOSはもちろん問題なく、iOSも、Androidも、Linuxでも、綺麗にアンチエイリアスされて表示される。Windowsでだけ、ジャギーがでる。
ネットで検索すれば、同じ問題に頭を抱える人は多数で、CSSで滲ませたりする事で軽減する工夫も提案されているものの、「しないよりも、ちょっとまし」レベルでしかない。
大見出しは25ピクセル以上にできるので問題ないのだが、ナビゲーションメニューなどはどうしてもひっかかる。クライアントによっては首を縦に振ってくれなかった。その場合、javascriptでUA判別をした。
if(navigator.userAgent.indexOf('Windows') != -1){ $("body").addClass('ms'); }
Windowsだけ、bodyに「ms」クラスを足している。これをセレクタにして、該当箇所をCSSで画像文字に置換した。
この問題が、Webフォントの普及の足かせになっていると思う。スマートフォンですら綺麗に表示できるのに、残念だ。早い日に、Windows8.1+IE11がIEの大多数になって、他のWindowsのブラウザも、綺麗なアンチエイリアスに対応してくれることを切望する。