文字のフォントサイズを調整する場面は、cssを記述していると必ず出てくるので、しっかりと覚えておきたいですよね。
そんなフォントサイズの指定方法を今回はご紹介します。
font-sizeの使用方法
フォントサイズを変更するには、(font-size)プロパティを利用します。値には3つ種類があるので1つづつ見ていきましょう。
単位で値を指定する
px/em/exなどの単位を使った数値を値に入れる方法です。
font-sizeでは数値は利用できますが、−の値は利用できません。ピクセルは、1ピクセルを1の基準にしているので、ユーザーの閲覧環境の解像度によって大きさが変化します。
%で値を指定する
%でも値を指定することができます。
まず、ブラウザのデフォルトの値を確認しておきましょう。ブラウザのデフォルトのフォントサイズでは100%は16pxになっています。つまり100%と値に入力すると、16pxのフォントサイズが反映されます。
キーワードで値を指定する
数値や、%の他にも決められたキーワードを値に入れることで、フォントサイズを指定することもできます。フォントサイズの値に利用できるキーワードは7種類で、下記の7段階のフォントサイズになっています。
・xx-small
・x-small
・small
・medium
・large
・x-large
・xx-large
一番上が小さく、下に行くほどサイズを大きく設定するキーワードです。mediumは標準のサイズに設定されます。