和文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だけでなく、FirefoxChromeなど他のブラウザでも変わらない。例外的にWindows8.1のIE11だけはちゃんとアンチエイリアスがかかっていたけど、これは少数。同じWindows8.1でもFirefoxChromeは未対応。Windows7のIE11でも駄目。(Windows8のIE10,11は環境が手元にないので未確認)

MacOSはもちろん問題なく、iOSも、Androidも、Linuxでも、綺麗にアンチエイリアスされて表示される。Windowsでだけ、ジャギーがでる。

ネットで検索すれば、同じ問題に頭を抱える人は多数で、CSSで滲ませたりする事で軽減する工夫も提案されているものの、「しないよりも、ちょっとまし」レベルでしかない。

大見出しは25ピクセル以上にできるので問題ないのだが、ナビゲーションメニューなどはどうしてもひっかかる。クライアントによっては首を縦に振ってくれなかった。その場合、javascriptUA判別をした。

if(navigator.userAgent.indexOf('Windows') != -1){
	$("body").addClass('ms');
}

Windowsだけ、bodyに「ms」クラスを足している。これをセレクタにして、該当箇所をCSSで画像文字に置換した。

この問題が、Webフォントの普及の足かせになっていると思う。スマートフォンですら綺麗に表示できるのに、残念だ。早い日に、Windows8.1+IE11がIEの大多数になって、他のWindowsのブラウザも、綺麗なアンチエイリアスに対応してくれることを切望する。