CSS font-size

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

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

書式

font-size: size

属性

size
フォントの大きさを指定します。
意味
xx-large 極大
x-large 大きい
large やや大きい
larger 大きい(相対値)
medium 通常(規定値)
smaller 小さい(相対値)
small やや小さい
x-small 小さい
xx-small 極小

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 (2021) CSS Fonts Module Level 4