WindowsXPでもアンチエイリアスが効いてる感じで(にしたかった)

常に、しっかりと調べてちゃんとした記事を書いてくださっているヨモツネットさんで、(もう1カ月前ですが)WebFontsとして利用できるフリーの和文フォントが紹介されていました。

ヨモツネットさんは、以前から『XPではClearTypeが(デフォルトだと)有効じゃないので、せっかく@font-faceしても、いまひとつ恩恵を受けられない』的なお話をブログやイベントされており、各所で似たようなお話を見聞きしていた事もあり、その事自体は把握しておりました。

ただ、実際に試した事がなかったので、これを機に試してみる事にしました。
『そもそも、あまりフォントとかいじらないで見せるべき』とか、そういう話は今回、気にしないでください。

とりあえず、テスト用のファイルを作ってみる

実際には紹介されていたフォントを全て試したのですが、スペースの関係(謎)で、下記の3つに絞って結果を掲載しておきます。

IPAフォントに関しては、IPAex系を使っても、同様の結果が得られると思います。

IE用にttfをeotに変換

試すには、まず、テスト用のファイルを作らんと。 という事で、ヨモツネットさんが紹介されていたフォントを一通りダウンロードして、ttfをeotに変換します。
ttf → eotの変換は色々な方法があると思いますが、今回は、ttf2eotを使わせていただきました。

順番に@font-face

今回は実戦を伴わないテストなので、プラットフォーム互換などは考えず、順に試しますので、IE用とそれ以外でだけ分ければOK。

VL ゴシックの場合

<style type='text/css' media='all'>
@font-face{
font-family:'VLPGothic';
src:url('/VL-Gothic-Regular.eot'); /* IE */
src: local('hide from IE'),url('/VL-Gothic-Regular.ttf') format('truetype'); /* Not IE */
}
body{
font-family:'VLPGothic',sans-serif;
line-height:1.5;
}
</style>

IPA P ゴシックの場合

<style type='text/css' media='all'>
@font-face{
font-family:'IPAPGothc';
src:url('/ipagp.eot'); /* IE */
src: local('hide from IE'),url('/ipagp.ttf') format('truetype'); /* Not IE */
}
body{
font-family:'IPAPGothc',sans-serif;
line-height:1.5;
}
</style>

IPA P 明朝の場合

<style type='text/css' media='all'>
@font-face{
font-family:'IPAPMincho';
src:url('/ipamp.eot'); /* IE */
src: local('hide from IE'),url('/ipamp.ttf') format('truetype'); /* Not IE */
}
body{
font-family:'IPAPMincho',sans-serif;
line-height:1.5;
}
</style>

と、まあ、こんな感じです。

htmlのソースは割愛しますが、font-sizeとかcolorはインラインで書いて、font-sizeはpx単位にしてあります。
あと、strongとemを使っています。

スクリーンショット

テストにしか使ってないので、問題なくデフォルトの状態だろうと思いつつ、念のため確認しましたが、『画面のプロパティ→デザイン→効果→次の方法でスクリーン フォントの縁を滑らかにする』は、「標準」になっていました。

では、順番に。

VL ゴシック

Chrome

Firefox

IE7

IE6

読めなくはないけど、濃淡というか明るさで強弱付けるのは無理っぽいですね。#666程度までならアリっちゃあアリかもしれませんが、環境によっても見え方が変わると思うので、お勧めは出来ませんねぇ。 ただ、IE7に関しては、いける気がします。

IPA P ゴシック

Chrome

Firefox

IE7

IE6

ダメですね。 ただ、これもIE7に関しては、いける気がします。

IPA P 明朝

Chrome

Firefox

IE7

IE6

これもダメですね。 ただ、これもIE7に関しては、アリと言えなくもないかな。フォントサイズ大きめのトコで、かつ、(引用など)部分的に使うとかであれば。

結果

事実に関しては、ご覧の通りなので、それぞれのプロジェクトで相応の立場の方がご判断されれば良いと思いますが、「使うとしたらXPかつIE7以上」みたいになんらかの方法で分けて使う感じですかね。 ↓ごくいい加減なサンプルで申し訳ございません。

<?php
if (preg_match("/Windows NT 5/",$_SERVER['HTTP_USER_AGENT'])) {
echo "<!--[if gte IE 7]><style type='text/css' media='all'>@font-face{font-family:'IPAPGothic';src:url('/ipagp.eot');}body{font-family:'IPAPGothic','Verdana','MS PGothic',sans-serif;}</style><![endif]-->";
}
?>

Vista以降は、デフォルトだとClearTypeが有効になっているので、(Windows7で見た限り)今回試したフォントは、そこそこ見れる感じでした。
ただ、Meiryoではなく、あえてWebFontsを使うにはちょっと根拠が足りない気もします。

という訳で、XPのサポートが終了する日を待ち望みつつ、「IE9でせっかくフォントまわりの表示をキレイにするんだから、いい感じのフォントを追加してくれよ。せめて日本語がまっとうに表示される明朝体をひとつだけでも」みたいな嘆願をMSさんに出してみるとか?

また、最後になりましたが、日本語対応フォントの制作ってめちゃくちゃ大変で、そんな大変なものを無償で提供されている方々には本当に頭が下がります。
AXIS Basicが9,354文字とかだったので、毎日(365日)欠かさず10字作っても、2年とか3年とか、かかるの計算に……

今回のテストに関しては、クライアントさんから「HG丸ゴシックとか使ってよ」などと言われてしまう、たまにあるパターンでも「こういう事情で現実的じゃないッスね」という資料にするとか、何かに役立つと幸いです。

あ、そういえば、JimdoのBusinessプランではモリサワが使えるらしいですね(本文などで使えるようになるのは近日予定)。  * 「使える」ってのがどういう意味なのか、どこに書いてあるか分かりませんでした(汗