フォントのサイズ - wicky @ ウィキ

フォントのサイズ

　font-sizeプロパティでフォントの大きさを指定することができる。px、em、exといった単位で数値を指定できるほか、親要素から継承したフォントサイズを100％としたパーセンテージを指定することができる。

　プロパティ値にsmaller、largerを指定すると、親要素から継承したフォントサイズを相対的に１段階（1.2倍）変化させることができる。

　※大きさの単位については、プロパティ値の単位を参照。

　また、１段階ごとに1.2倍の大きさになる７段階の既定値（xx-smal、x-small、small、medium、large、x-large、xx-large）によってフォントサイズを指定することもできる。この基本の値であるmediumの大きさは、ユーザ環境によって異なる。

　テキストをWebブラウザへ表示することを考えた場合、ユーザの設定によって大きさを変更することが可能なemや%、あるいは既定値による指定が良いだろう。

　以下に、フォントサイズの設定例を示す。

●フォントサイズの設定例

p.num1 { font-size : 0.8em }
p.num2 { font-size : 1em }
p.num3 { font-size : 1.2em }
p.num4 { font-size : 80%; }
p.num5 { font-size : 100%; }
p.num6 { font-size : 120%; }
p.num7 { font-size : xx-small }
p.num8 { font-size : x-small }
p.num9 { font-size : small }
p.num10 { font-size : medium }
p.num11 { font-size : large }
p.num12 { font-size : x-large }
p.num13 { font-size : xx-large }

●HTMLのサンプル

<p class="num1">0.8em</p>
<p class="num2">1em</p>
<p class="num3">1.2em</p>
<p class="num4">80%</p>
<p class="num5">100%</p>
<p class="num6">120%</p>
<p class="num7">xx-small</p>
<p class="num8">x-small</p>
<p class="num9">small</p>
<p class="num10">medium</p>
<p class="num11">large</p>
<p class="num12">x-large</p>
<p class="num13">xx-large</p>