CSS: フォントサイズを指定する font-size:

Webページのフォントサイズを指定するには、font-size を使用します。

font-size に指定する値は次の4通りあります。

  • 実数値+単位
  • パーセント値+%
  • 相対サイズキーワード
  • 絶対サイズキーワード
実数値+単位
数値に単位を付けて指定します。(例: 14px, 12pt、1em)
パーセント値+%
親要素のフォントサイズに対するパーセンテージを指定します。(例: 100%、120%)
相対サイズキーワード
larger、smallerの2つがあります。親要素のフォントサイズに対する相対サイズです。 larger の場合は1周り大きいサイズ、smaller の場合は1回り小さいサイズになります。 1周りとはどれくらいかは、次で説明する絶対サイズキーワードを参考にしてください。
絶対サイズキーワード
xx-small、x-small、small、medium、large、x-large、xx-large の7つのキーワードがあります。 medium を基準とし、最も小さいサイズがxx-small で、 最も大きいサイズが xx-large です。

キーワードと表示比率の関係は次の通りです。

キーワード比率
xx-small0.6倍
x-small0.75倍
small0.89倍
medium1倍
large1.2倍
x-large1.5倍
xx-large2倍

font-size 使用例


body {
    font-size: 15px;
}

p {
    font-size: 100%;
}

h1 {
    font-size: x-large;
}

font-size サンプル

複数のフォントサイズを指定してみました。表示の違いは下の通りです。

このフォントサイズは「100%」です。

このフォントサイズは「1em」です。

このフォントサイズは「15pt」です。

このフォントサイズは「15px」です。

このフォントサイズは「xx-small」です。

このフォントサイズは「x-small」です。

このフォントサイズは「small」です。

このフォントサイズは「medium」です。

このフォントサイズは「large」です。

このフォントサイズは「x-large」です。

このフォントサイズは「xx-large」です。

このフォントサイズは「larger」です。

このフォントサイズは「smaller」です。