WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > font-size
font-size  文章  文字 

フォントのサイズを指定。

このエントリーをはてなブックマークに追加

パラメーター

●%で指定
 100%を基準に%値で指定することができます。

●数値で指定
 pt …ポイント
 px …ピクセル
 em …100%(標準値)を1とする単位。1.5em=150%です。
 ex …小文字の「x」の高さを1とする単位。

●キーワードで指定
 xx-small、x-small、small、medium(標準)、large、x-large、xx-large のいずれかを指定
 *1段階上がると1.2倍のサイズになります。

●相対的なサイズで指定
 smaller …1段階小さく。
、larger …1段階大きく。

サンプルコード

<span style="font-size:50%;">50%</span> |
<span style="font-size:100%;">100%</span> |
<span style="font-size:150%;">150%</span> |

50% | 100% | 150%

font-size を1pt~15pt まで
1pt 2pt 3pt 4pt 5pt 6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt

<span style="font-size:10px;">10px</span> |
<span style="font-size:10pt;">10pt</span> |
<span style="font-size:3em;">3em</span> |
<span style="font-size:3ex;">3ex</span>

10px | 10pt | 3em | 3ex

<span style="font-size:xx-small;">xx-small</span> |
<span style="font-size:x-small;">x-small</span> |
<span style="font-size:small;">small</span> |
<span style="font-size:medium;">medium</span> |
<span style="font-size:large;">large</span> |
<span style="font-size:x-large;">x-large</span> |
<span style="font-size:xx-large;">xx-large</span>

xx-small | x-small | small | medium | large | x-large | xx-large

<span style="font-size:smaller;">smaller</span> |
<span style="font-size:larger;">larger</span>

実行結果

smaller | larger