font-size

CSSでは、フォントの大きさ(サイズ)を変更することができます。

本ページでは、font-sizeプロパティについて説明します。

font-sizeプロパティとは

font-sizeプロパティは、フォントの大きさを変更します。例えば、2倍の大きさで表示することができます。

font-sizeの定義は、以下のとおりです。

【font-sizeの定義】
値	absolute-size \| relative-size \| length \| percentage
初期値	medium
適用対象	すべての要素
継承	する

以下は、font-sizeで使える値と説明です。

absolute-size: xx-small、x-small、small、medium、large、x-large、xx-largeから選択します。mediumがデフォルトで、左ほど小さく、右ほど大きく表示されます。
relative-size: larger、smallerのどちらかです。継承したサイズからlargerでは大きく、smallerでは小さくなります。
length: フォントサイズを数値と単位で指定します。負の値は、使えません。
percentage: 親要素からの相対値(%)で指定します。負の値は、使えません。

以下に、font-sizeで使えるキーワードを使った場合の表示例を示します。

利用例は、以下のとおりです。

【font-sizeの利用例】

p {
  font-size: 90%;
}

上記により、親要素のフォントサイズが16pxだった場合、14.4px(= 16px × 90%)で表示されます。

もし、すでに親要素で90%になっていた場合は、親要素からの相対値なので12.96px(= 14.4px × 90%)になります。これは、lengthのemで指定した場合も同じです。font-size:0.9em;と指定すると、親要素の0.9倍のサイズになります。

以下は、lengthの単位でremを利用した例です。

【remの利用例】

p {
  font-size: 0.9rem;
}

上記は、ブラウザのデフォルトからの0.9倍のサイズになります。ブラウザのデフォルトが16pxだった場合、14.4pxになります。

remは、親要素からの相対値ではないため、親要素の影響を受けません。

なお、キーワードを使う場合は、font-size: x-smallなどと指定します。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
font-size	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
font-size	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。