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 搭配出不同的風格效果。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012