CSS font-size 文字大小

設定文字大小算是 CSS 中經常用到的技巧，很少人會完全不設定網頁文字的大小，在 CSS 中設定文字大小可以使用 font-size 的語法，可以給的値有很多，像是數字+單位、數字+%、英文字母等，在各種不同的單位中又以 px 最為常用，因為 px 的數字範圍可以設計出細膩的文字大小差異，一般網頁內容文字約 12px ~ 16px 左右，標題文字的大小約 18px~22px 左右，設計師可依自己的頁面風格調整數字大小，數字越大代表字體越大，以下為 font-size 常用單位比較表。

CSS font-size 文字大小比較表

屬性值	語法	呈現效果
px	<span style="font-size:13px;">13px</span><br> <span style="font-size:16px;">16px</span><br> <span style="font-size:18px;">18px</span>	13px 16px 18px
em	<span style="font-size:1em;">1em</span><br> <span style="font-size:2em;">2em</span>	1em 2em
cm	<span style="font-size:1cm;">1cm</span><br> <span style="font-size:1.2cm;">1.2cm</span><br>	1cm 1.2cm
xx-small	<span style="font-size:xx-small;">xx-small</span>	xx-small
x-small	<span style="font-size:x-small;">x-small</span>	x-small
small	<span style="font-size:small;">small</span>	small
smaller	<span style="font-size:smaller;">smaller</span>	smaller
medium	<span style="font-size:medium;">medium</span>	medium
large	<span style="font-size:large;">large</span>	large
x-large	<span style="font-size:x-large;">x-large</span>	x-large
xx-large	<span style="font-size:xx-large;">xx-large</span>	xx-large
larger	<span style="font-size:larger;">larger</span>	larger
%	<span style="font-size:100%;">100%</span><br> <span style="font-size:120%;">120%</span><br>	100% 120%
inherit	<span style="font-size:inherit;">inherit</span>	inherit

font-size 可以繼承父層的屬性，並呈現更大或更小的尺寸，例如範例中的 smaller 就是比父層更小、larger 是比父層更大、200% 則是比父層大兩倍的意思，其中 font-size:inherit 的意思是繼承父層的大小，可是 IE8 及以前較舊的版本並不支援，所以建議不要使用。另外，網頁的風格設計通常不只是修改文字大小而已，還可以修改文字的顏色或字型，所以 font-size 常常與 color 文字顏色或 font-family 搭配出不同的風格效果。

延伸閱讀