フォントサイズの調整

キミガタメ様の記事を読んでフォントサイズの指定について考えてみました。

確かにXHTML1.1への移行の際XML宣言を追加している事からIEで表示されているフォントサイズは全体的に大きめになってしまっています。この問題には標準モードと後方互換モードというCSS解釈の違いが関係しています。(この問題については訪問者に優しいWebサイト作り様の文書型宣言とブラウザでの表示が参考になると思います。)

フォントのサイズが少々変わったところでサイトが見辛くなるように作っているつもりはありませんが、やはり見栄えが変わるという意味では気持ちが悪いというのも確か。ブラウザが違えども為るべく同じようなイメージでページを閲覧して欲しいという気持ちはあります。

そこで私もフォントのサイズ指定をキーワード指定から数値指定に変更する事にしました。


私は普段Mozilla Firefoxを使用していますので基準をFirefoxでの見え方とします。そしてその条件を踏まえた上でのキーワードからemへの書き換えを行う際作成したのが次の表です。

キーワード指定とem値指定での指定対応表
キーワード指定 キーワード指定の文字列 em値指定 em値指定の文字列
xx-small aA1あア亜 0.5em aA1あア亜
x-small aA1あア亜 0.6em aA1あア亜
small aA1あア亜 0.8em aA1あア亜
medium aA1あア亜 1.0em aA1あア亜
large aA1あア亜 1.2em aA1あア亜
x-large aA1あア亜 1.5em aA1あア亜
xx-large aA1あア亜 2.0em aA1あア亜

※ この表はスタイルシートを外した状態での差異を見るために作成しています。「スタイルシートなし」にしてご覧ください。

IEを使用の方はキーワード指定の文字列が若干大きく見えている筈です。この誤差をem値指定にする事で正確にでは無いですが吸収できるのではと考えています。

後方互換モードでの継承される要素の違い

キーワード指定ではフォントの大きさは標準からの乗数で表示されますが、em値指定にする事でfont-size要素の継承が発生します。

p {
font-size: small;
}
 
code {
font-size: small;
}
p {
font-size: 0.8em;
}
 
code {
font-size: 0.8em;
}

例えば上記の2つを比べると上の例ではp要素のfont-size指定はsmallでcode要素のfont-size指定もsmallですからそれぞれが同じサイズで表示されます。しかし下の例の場合は、もしもp要素の内部でcode要素が指定された場合にp要素のfont-size指定は0.8emですが、code要素のfont-size指定は次のような式で計算されます。

(0.8×0.8)=0.64em

つまりcode要素のフォントは0.64emと指定のサイズよりも小さくなります。

さて後方互換モードの際も継承は行われますがIEの継承は少々おかしいようです。例えばdiv要素の中にtable要素を置いた場合div要素に指定されたfont-size要素の値は継承されません。

その点に注意すれば書き換えは容易でしょう。

「フォントサイズの調整」への2件のフィードバック

  1. トラバありがとうございます。
    要素の中の要素は、気づきませんでした。
    参考にして訂正させていただきました。

  2. >棚旗織さん

    コメントありがとうございます。
    継承についてはブラウザのバグもあって継承されるものとされないものがゴチャゴチャになっているようですよ。

    困ったものです…。

コメントは停止中です。