CSS解説 文字フォントのサイズ指定
CSSで文字のサイズを指定したい。

CSSでの文字サイズの指定方法には主に①親要素に対しての割合指定②明示的なサイズ指定③キーワードの指定方法があります。

①親要素に対しての割合指定は以下のコードの様に「%」や「em」を使います。

font-size: 120%; font-size: 0.7em;
「%」はどのような比率か想像しやすいかもしれませんが、「em」は結構、見慣れないかもしれませんね。

けど分かりやすく、「1」で親要素と同じ大きさで、「2」で親要素の2倍を意味します。

次に②明示的なサイズ指定ですが、これは、下のコードの様にpx(ピクセル)で指定する方法です。

font-size: 12px;
そして、最後の③キーワードの指定方法は下のコードのようになります。

font-size: medium;
xx-large x-large large medium small x-small xx-small
説明した3つの指定方法のどれを使用するかは、いろんな画面比率のデバイスで表示されることを想定しているか、ほとんど固定の倍率で表示することを想定するかで、どの指定方法が都合がいいかを判断する必要がありますね。

お名前