font-sizeプロパティ

TOPページに戻る > CSS

font-sizeプロパティ

文字の大きさを指定できます
値には、px、emなどの単位。パーセンテージでの指定。キーワードでの指定ができます 相対単位で指定した場合は親要素のfont-sizeから計算。
親要素にfont-sizeの指定がない場合の親要素のfont-sizeはブラウザのデフォルトの大きさになる。(おおむね16px)

使い方（書式）

セレクタ { font-size: 値; }                         

font-sizeプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
単位	px、emなどの単位
パーセンテージ	85%、100%、120％など、パーセンテージで指定
xx-large x-large large medium small x-small xx-small	キーワードでの指定 xx-largeが一番大きく、xx-smallが一番小さい mediumが普通サイズ
larger smaller	親要素のサイズより大きくなる 親要素のサイズより小さくなる

実際の指定方法

.hoge { font-size: 1.2em; }  /* 親要素の文字の大きさの1.2倍の大きさ */

.hoge2 { font-size: 120%; }   /* 1.2emと同じ結果 */

.hoge3 { font-size: 14.5px; } /* pxで指定 小数点を付けて細かく指定可能 */

.hoge4 { font-size: small; }  /* キーワードで指定 */

html部分

<p class="hoge">font-size: 1.2em;</p>
<p class="hoge2">font-size: 120%;</p>
<p class="hoge3">font-size: 14.5px;</p>
<p class="hoge4">font-size: small;</p>

実際の表示

font-size: 1.2em;

font-size: 120%;

font-size: 14.5px;

font-size: small;

font-size（こちらがデェフォルトのフォント）