お客さんから送られてくる、「こんな感じでよろしく!」のHTMLに毎回 <font> タグが入ってきて文字サイズ合わせるのに手間取っていたので防備録。

FONTタグとfont-sizeプロパティの相関

FONTタグfont-sizeプロパティ
xx-smallfont size=1
x-smallfont size=2
smallfont size=3
mediumfont size=4
largefont size=5
x-largefont size=6
xx-largefont size=7

これに加え、

mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。*1

つまり、デフォルトのフォントサイズさえ決まっていればそれの1.2倍のサイズと判断すればよい。


ってことはわかったんだけど、じゃあ <font size="-1"> は何にあたるのかしら? font size=2 と同等?と思って調べました。

フォントの大きさはsize属性で指定します。1~7までの整数、または現在のフォントサイズに対して「+」「-」で指定します。 フォントサイズは1~7までしかないので、プラスマイナスした結果が1~7の範囲に収まるようにしなくてはなりません。 より大きなサイズやより小さなサイズの文字を表示させたいときには、スタイルシートを用いてください。 特にフォントサイズを指定しない場合のデフォルト値はsize= “3"となります。*2

要するに、デフォルトのフォントサイズが 15px だった場合、 <font size="-1">font-size: 12.5px;となる。と。(計算:15/1.2 = 12.5)

結論

デフォルトのサイズに対して「1.2倍」「-1.2倍」で考える!

余談

タイトルみたいなこと言ってくるお客さんのシステムでは、デフォルトのフォントサイズが指定されていない。。。 なので、後日ブラウザごとの標準の表示サイズをまとめます。

*1:http://www.htmq.com/style/font-size.shtml

*2:http://www.htmq.com/html/font.shtml