文字サイズ（Font Size）

font-sizeとは、フォントのサイズを指定するためのプロパティです。

サイズには実数値に単位を付けて指定できるほか、小さくする指定から大きくする指定まで、順にxx-small、x-small、small、medium、large、x-large、xx-largeという7つのキーワードが指定できます。

初期値はmediumです。

また、%値やsmaller、largerというキーワードで相対的に小さく、あるいは大きくすることができます。

Functional list
書式 font-size: <absolute-size> | <relative-size> | <length> | <percentage>
値
  • <absolute-size>
    • xx-small |x-small |small |medium |large |x-large | xx-large
  • <relative-size>
    • larger |smaller
  • <length>
  • <percentage>（親要素との関連で）
初期値 medium
適用要素 全ての要素
継承性 可能

font-sizeプロパティーは、表示される文字のサイズを修正するのに使われます。

絶対的な長さ（ptやinといった単位を使った）は、異なるブラウザ環境での適用が悪いので、慎重にで控えめに使用すべきです。

絶対的な長さの文字は、ユーザーにとって大きすぎたり小さすぎたり容易に変動することがあります。

サイス指定の例は以下のようになります：

H1{ font-size: large }
P{ font-size: 12pt }
LI{ font-size: 90% }
STRONG { font-size: larger }
制作者は、Microsoft Internet Explorer 3.x は, emとex単位をピクセルとして不正に取り扱い、これらの単位を使ったテキストが判読できなくなりることに気付いておくべきです。

ブラウザも、親要素の文字サイズに相対的にではなく、初期文字サイズに相対的なパーセント値を間違って

H1 { font-size: 200% }

レベル1見出しでサイズが、親要素文字サイズの二倍ではなくIEの初期文字サイズの二倍になり、これは危険です。

このケースではBODYが親要素であるかのようで、mediumを定義すのがよく、一方IEにあった初期レベル1見出しの文字サイズは恐らく xx-largeとみなされます。

これらのバグのため、制作者はfont-sizeでパーセント値を使うには注意すべきで、このプロパティーでは em and ex単位を避けるべきです。

戻る