このページで解説するコードの実行結果。

キーワード
xx-large
x-large
large
medium
small
x-small
xx-small
数値
10px
20px
30px
1em
1.5em
2em
larger / smaller
10px
smaller
larger
30px
smaller
larger

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    color:              navy;           /*  文字の色 */
    border:             2px solid blue; /*  境界線 */
    margin:             5px;            /*  外側の余白 */
    padding:            5px 10px;       /*  内側の余白 */
}

font-sizeの概要

文字の大きさを、下表のキーワードか数値(+ 単位)で指定する。

(表) font-sizeの設定値
設定値デフォルト
xx-largexx-large
x-largex-large
largelarge
mediummedium
smallsmall
x-smallx-small
xx-smallxx-small
largerlarger
smallersmaller

なお、(私は) mediummiddleとよく間違えるので指摘しておく。

プロパティ設定する内容真ん中の設定値
font-size文字の大きさmedium
普通
vertical-align縦方向に整列middle
中央
text-align横方向に整列center
中央
CSS : font-size
.xx-large   {      font-size:   xx-large;   }
.x-large    {      font-size:   x-large;    }
.large      {      font-size:   large;      }
.medium     {      font-size:   medium;      }
.small      {      font-size:   small;      }
.x-small    {      font-size:   x-small;    }
.xx-small   {      font-size:   xx-small;   }
HTML : 適用するHTML
<div class="xx-large">  xx-large</div>
<div class="x-large">   x-large </div>
<div class="large">     large   </div>
<div class="medium">    medium  </div>
<div class="small">     small   </div>
<div class="x-small">   x-small </div>
<div class="xx-small">  xx-small</div>
実行結果
xx-large
x-large
large
medium
small
x-small
xx-small

数値で指定することもできる。

CSS : font-size
.px10      {      font-size:   10px;      }
.px20      {      font-size:   20px;      }
.px30      {      font-size:   30px;      }
.em10      {      font-size:   1em;      }
.em15      {      font-size:   1.5em;      }
.em20      {      font-size:   2em;      }
HTML : 適用するHTML
<div class="px10">    10px  </div>
<div class="px20">    20px  </div>
<div class="px30">    30px  </div>
<div class="em10">    1em  </div>
<div class="em15">    1.5em  </div>
<div class="em20">    2em  </div>
実行結果
10px
20px
30px
1em
1.5em
2em

largersmaller

largersmallerは元のフォントサイズに対して、「より大きく」「より小さく」表示する。

CSS : font-size
.px10    { font-size:   10px;    }
.px30    { font-size:   30px;    }
.smaller { font-size:   smaller; }
.larger  { font-size:   larger;  }
HTML : 適用するHTML
<div class="px10">
    10px
    <div class="smaller">smaller</div>
    <div class="larger">larger</div>
</div>
<div class="px30">
    30px
    <div class="smaller">smaller</div>
    <div class="larger">larger</div>
</div>
実行結果
10px
smaller
larger
30px
smaller
larger

Emmet : fz

記述Visual Studio Code
fzfont-size: ;