最近ずっとこれから逃げてきたのだが、そろそろ本気で戦わないといけないんじゃないだろうか。ブラウザ間におけるフォントサイズの違いである。
前から良く言っているようにヴォルフロはSafariを基準にサイトデザインを行っているが、Safariはフォントサイズを相対指定すると、他のブラウザよりちょっとデカく表示される気がするのだ。なので、Safariで丁度いいな、と思ってるっていうことは、実は、他のブラウザから見るとちょっと小さいのだ。Safariは細かくサイズ調整をしてくれるからそのせいかな？とも思うんだけど、それにしても小さい気がする。なんだかよく分からん。最近ちょっとブラウザごとのフォント指定についてこんがらがってるので、考えをまとめるためにちゃんと検証してココに書いてみよう、と。
今回は、
- Safari 1.2
- Internet Explorer 5.2.2（以下、MSIE 5.2）
- Opera 7.5
- Firefox 0.8
の4つのブラウザについて比較をしてみる。一応現在のMacの主要ブラウザではないだろうか。Windowsまでは手が回らないので割愛。
現在、ヴォルフロでは、標準テキストのフォントを、font : 80%/1.3 'Hiragino Kaku Gothic Pro','Osaka','ＭＳ Ｐゴシック',sans-serifと、指定している。つまり、フォントサイズはfont-size : 80%である。んで、DTDはXHTML 1.0 Strictにしてxml宣言は省いているので、どのブラウザでも標準モードで表示されているはずだ。
さらに、KANAIは、ブラウザ側の表示設定は極力デフォルトのままにしている。この状態でサンプルテキストを各ブラウザで表示、ついでにブラウザ側の設定サイズもチェック。以下結果。ブラウザ名の右側のカッコ内がブラウザのデフォルト指定。
- Safari 1.2（ヒラギノ明朝 Pro 16）
- MSIE 5.2（ヒラギノ角ゴ Pro W3, 16/96dpi）
- Opera 7.5（Times, 16）
- Firefox 0.8（ヒラギノ角ゴ Pro W3, 14px）
改めて見てみたら意外とFirefox意外はみんなデフォルトが16px。Firefoxだけが14pxだったみたい。そこで、一時的にFirefoxの標準フォントサイズを16pxに変えてみると、MSIE、及びOperaと全く同じになった。
これだけだと分かりにくいので、"東京"部分だけを拡大して比較。ちなみにこの「東京発信情報が日本のオピニオン」ってのは昔やってたテレバイダーってTV番組のスローガンです。
やっぱりSafariがデカイ。しかし、それ以外は意外とみんな同じじゃないか。てことは、単純にSafariの計算の仕方の違いらしい。
先にも書いた通り、SafariはOS Xのフォントのアンチエイリアス力を活かしてか小数点以下まで正確にフォントサイズを調整してくれる。対してMSIEなんかは小数点以下は切り捨てて考える。他のブラウザもMSIEと同じになったということは、彼らも小数点以下は切り捨てスタイルらしい（Netscapeはそうでも無かった気がするんだけどなぁ。
ヴォルフロは今80%なんていう大雑把なサイズ指定をしている。もしや、と思い正確に計算すると16px x 0.80 = 12.8pxとなり、ほぼ13px。で、且つ13px未満。これだ。これのおかげでSafariは普通に12.8pxのサイズで表示され、他のブラウザだと小数点以下を切り捨てて12pxで表示されていた。12.8pxなら13pxの方が近い。っつーこで、13pxで揃えよう。13pxを超えるには、16px x 0.82 = 13.12pxつまり、82%にすれば良いらしい。ってことでやってみる。
MSIEは相変わらずだけど（MSIEは12pxの次が14px）、OperaとFirefoxは13pxにしてくれた。これでSafariとOperaとFirefoxは同じフォントサイズになった様だ。
しかし、他のブラウザに比べてSafariは明らかにフォントが細い。これもOS Xの素敵アンチエイリアス効果か？ これのおかげで同じ13pxでもSafariの方が大きく見える。ムムム、こんなところにも視覚的トリックがあったとは（？。
まぁ、MSIE（特にMacの）は相手にしてないんで、それ以外の3つで同じくらいに見えるなら許容範囲。Firefoxはデフォルトが14pxっぽいから同じに見えるわけじゃないけど、他のMozilla系ブラウザの中にはデフォが16pxのもあるし。これ以上はめんどくさいし。
やたら色々やった割には、結果はすごくまっとうってか当たり前だった……。しかも汎用性に欠ける内容。まぁ、考えがまとめられたんだから良いんだけど。The 自己満足。しいていうなら、13pxくらいに見せたいならfont-size:82%にするといいよっていうくらいでしょうか？ これでさえWindowsではどうなのか知らんし。ここまで律儀に文章を読み進めた人はガッカリだ。長い割に内容がない。
そもそも相対指定の%なのにpxで比較する事自体がおかしいっつー話もあるしね。
それにしてもSafariのテキスト表示はキレイです。特にボールドがかかった文字。Safariに馴れるとホント他のブラウザが使えない。Safariすごい。Safari偉い。
っつーことで、ヴォルフロは今日からフォントサイズ82%になります。4649。
Safari以外のブラウザで字が太いのは、ヒラギノじゃなくてOsakaで表示されてるからでした。分かっててやってたはずなのに忘れてた。自分がアホすぎる orz...
あまりにもダサイのでしばらく晒しときます。 （2004年5月23日追加）