やっぱピクセル指定が一番楽なんかな～と思ったりする(ブラウザでPCに表示する場合は)。

まぁ、何をしていたかというと、最初 em 指定で0.87em とか、1.2em とか、うらうらやってたわけです。したら、IE6 と FF2 で大きさ違うんでやんの。それどころか、IE6で、和文と欧文のサイズが違うんでやんの・・・欧文はちっこくなってくけど、和文はそのまま・・・とか。

これじゃいかんってんで、%指定にしてみようと、いじっていると、IE6での和文と欧文のサイズ変化は同じなんだけど、ブラウザ間でサイズの変わるタイミングが違う。たとえばIE6は、171%で大きくなるけど、FFは172%で大きくなる。あと、100%未満で日本語の文字の高さが1pxずつ違う・・・。ふが～。

割合で指定してるときは、継承していった先も困る。bodyが 12px だとして、font-size 80% の div の中の font-size 92% のh3 テキストのサイズは何ピクセル？ って。スクリーンの解像度がすんごく高くて、たとえばベースが12pxで、その100%～80%まで滑らかに表示してくれるならいいんだけど、実際は、(12pt = 12px だとして・・・えらい強引だ・・・)12px, 11px, 10px,9px、の階調でしか表示できないうえに、ピクセル未満の値の扱いがブラウザや文字の種類によって違うとなると、どうしていいかわからん。アンチエイリアスが欧文でかかって和文でかからんとか。気にしだすときりがない。

そうすっと、ピクセルでいいんじゃ～んと。まぁ、ピクセルってったって、12px は画面上で何mmって話にはなるんだけど。

どこまで想定してこちらで対応するかを決めるのがすごく難しいです。とりあえず、今回は%でやろう・・・IE6め～!(笑。

サイズチェックに使ってみたJavaScriptコード


str = 'The quick brown fox jumps over the lazy dog. 1234567890';
str += ' すばしっこい茶色の狐は　のろまな犬を飛び越える';
for(var i = 200; i > 50; i-=1) {
    tag = '<p style="font-size:' + i + '%";>';
    tag += str;
    tag += ' ____ ' + i + '%</p>';
    document.write(tag);
}