CSS font-size property

フォントのサイズを指定します。sizeにはフォントのサイズを指定します。フォントのサイズは以下の表の中から選択するか、1emのように単位で指定します。fontスタイルシート属性でも同様の定義が行えます。

font プロパティでも文字の大きさを指定できる。

書式

font-size: size

属性

size
フォントの大きさを指定する。フォントのサイズは次に示す絶対値で指定できる。
フォントサイズ(絶対値)
意味 スケール 見出し
xx-small 極小 0.6 h6
x-small 小さい 0.75
small やや小さい 8/9 h5
medium 通常(規定値) 1 h4
large やや大きい 1.2 h3
x-large 大きい 1.5 h2
xx-large 極大 2 h1

親要素のフォントサイズに対する相対値で指定することもできる。

フォントサイズ(相対値)
意味
smaller 親要素のフォントサイズより小さい
larger 親要素のフォントサイズより大きい

xx-small

次にスタイルシート属性 font-size を使用したHTMLの例を示します。

<p style="font-size: xx-small;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

x-small

<p style="font-size: x-small;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

small

<p style="font-size: small;">
  The quick brown fox jumps over the lazy dog.
</p>

smaller

<p style="font-size: smaller;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

medium

<p style="font-size: medium;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

large

<p style="font-size: large;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

larger

<p style="font-size: larger;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

x-large

<p style="font-size: x-large;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

xx-large

<p style="font-size: xx-large;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

参考文献

World Wide Web Consortium (2018) CSS Fonts Module Level 3

World Wide Web Consortium (2021) CSS Values and Units Module Level 4