フォントサイズチェックリソース 1

フォントサイズ指定手法第2段！

※ちなみに第1段は NOTE 参照。それを理解した上でそこで語られていなかった問題点を検証し、解決しようと思います。こんなことに一体何年かけているのでしょう。ぅぅぅ。

フォントサイズをパーセント指定して、IE と他のブラウザでフォントサイズを揃えるためにどうすればよいかを考えます。サイズ指定だけではなくどうも font-family に関しても一緒に考えなくてはならないようです。また、そのドキュメントの文字コードも影響する模様なので、問題解決までは長い道のりかもしれません。

気づいた事（問題解決はそう簡単ではない）

ウインドウズIE6 ですが、やっぱり文字コード変えたら「ピクッ」って動くんですけど、なんでですかね？
font-family で英語を先にしたら、UTF-8 だと日本語だと UIゴシックになる？
単純計算のパーセントだと、ブラウザによって使われるフォントのポイントサイズが異なる

ベースフォントサイズ（`body { font-size: 100%; }`）100% の場合

WindowsIE※ と Mac Safari1.2 では、サイズが変わる段階は同じ。Safari 等には「最小フォントサイズ」が指定できるものがあって、それ以下のサイズは変化しない場合がある。

デフォルト環境でチェックする。（基準フォントサイズが 12pt ※96ppi 16px）

※ウインドウズIE では、IE5.x と IE6 では、HTML宣言によるモードの影響を受けてフォントサイズが異なりますが、パーセント指定は影響を受けません。基本的に、body を含め、スタイルシートに 100% 指定をいれた時点で、両者のフォントサイズは（ユーザーが設定変更をしていなければ）揃います。ちなみに影響を受けるのはサイズ指定にキーワードを使う場合で、例えば font-size:medium としたときのフォントサイズは、IE6 がスタンダードモードで動作すると IE5 よりでかく、いや違った小さくなります。。。あれ？どっちだっけ？もう最近解決してるから忘れてしまったぞ。とりあえず、サイズ違うんだよ。これは、IE5 （または互換モードのIE6）は 100% = 1em = small であるのに対し、スタインダードモードの IE6 は 100% = 1em = medium と仕様が変わったためです。

※50％以下はほとんど必要ないので調べてません。

ブラウザ同士で比べる

さてここまではよくて、Safari と WindowsIE で段階が同じことでホッとしたのですが、困っているのはウインドウズでの、IE と他のブラウザのフォントサイズが異なることです。

Firefox1.0 とか、Opera 7 とか

尚、設定でフォントは「ＭＳＰゴシック」にしました。持っているビットマップフォントとか、ポイントサイズとかが異なると違った結果になることでしょう。フォントファミリー指定は、今後このサイズ検証が落ち着けばいろいろと実験してみたいと考えていますが、重要度は低いです。

相当ポイントサイズ	12pt	11pt	11pt	10pt	10pt	10pt	8pt	8pt	?
相対パーセント（IE）	100 - 97	96 - 91	90 - 85	84 - 79	78 - 72	71 - 66	65 - 60	59 - 54	53 - 50（※）
相対パーセント（FF）	100 - 98	97 - 91	90 - 85	84 - 79	78 - 73	72 - 66	65 - 60	59 - 54	53 - 50（※）
相当ポイントサイズ	12pt	11pt	11pt	10pt	10pt	8pt	8pt	?pt	?pt
相対パーセント（Opera7）	100 - 100	99 - 94	93 - 88	87 - 82	81 - 75	74 - 69	68 - 63	62 - 57	56 - 50（※）
相当ポイントサイズ	12pt	11pt	11pt	10pt	10pt	8pt	8pt	?pt	?pt

数値一覧で見る分には、そう違わないのですが、見比べてみたら 「見た目サイズが違ってる！」 ので、一体ドコからすれてるのかと調べるといやいや、共通箇所を選ぶのがやっとという感じ。

共通箇所となる数値だけ抜き出します。

相当ポイントサイズ	12pt	11pt	11pt	10pt	10pt	10pt/8pt（!）	8pt	8pt	6pt？
相対パーセント（IE）	100	96 - 94	90 - 88	84 - 82	78 - 75	71 - 69	65 - 63	59 - 57	53 - 50

問題は 71 - 69 % （てことは、74 - 66 % ということです） のとき。IE と Firefox/Opera でおもいっきりフォントサイズが異なります。使われているポイントサイズが違うのです。ですから、70% という指定は避けたほうが無難 です。66.6% という指定で困っていた自分もやっと理解しました。この数値は使うべき数値ではありませんでした。ちゃん。

↑ここ font-size: 70%; 。デフォルト環境の Firefox、Opera、IE で比べてみておくれ。

ここで検証しようとおもったキッカケは、ichiro.to の本文サイズを決めているときにハマったから（最近これくらい小さいサイズって余りつかってなかったんで）なのですが、まだ、問題はあります。フォント種別に英語フォントが絡んだ場合に、そのベースラインが日本語と異なり崩れる Opera のことです。ここまで絞ってしまうとホントに指定できるサイズが少なくて泣けます。