フォントのサイズを指定する

CSS - font-size

概要

CSSプロパティ「font-size」は、フォントのサイズを指定することができます。

<p>
都道府県は、<span class="font-size-1">北海道</span>、青森県、<span class="font-size-2">千葉県</span>、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font-size-1 {
  font-size: 10px;
}
.font-size-2 {
 font-size: 1.8em;
}
</style>

値の指定方法

{ font-size: 値}
説明
数値 px、em、%など。マイナス値は指定できません。
キーワード small, largeなど
単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。

プロパティの種類について

「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする

実装における注意点

最小サイズの違い

ブラウザによって、可読性保持の為の指定できる最小サイズがあります。10px未満の値は特にブラウザによって表示がことなりますので、注意しましょう。

<p>今日は<span class="size-10px">晴れ</span>です。</p>
<p>今日は<span class="size-9px">晴れ</span>です。</p>
<p>今日は<span class="size-8px">晴れ</span>です。</p>
<style>
.size-10px {
  font-size: 10px;
}
.size-9px {
  font-size: 9px;
}
.size-8px {
  font-size: 8px;
}
</style>

使用例

それぞれ異なった単位で指定してみます。どのような振る舞いか確認してみてください。

<p>今日は<span class="size-px">晴れ</span>です。</p>
<p>今日は<span class="size-large">晴れ</span>です。</p>
<p>今日は<span class="size-par">晴れ</span>です。</p>
<p>今日は<span class="size-em">晴れ</span>です。</p>
<style>
.size-px {
  font-size: 12px;
}
.size-large {
  font-size: large;
}
.size-par {
  font-size: 140%;
}
.size-em {
  font-size: 2em;
}
</style>

 

仕様書

関連CSSプロパティ