CSS font-size 網頁文字大小設計

CSS font-size 是網頁文字大小設計的標準屬性,也受到廣大的主流瀏覽器所支援,CSS 的 font-size 已經逐漸取代傳統的 HTMLfont size 設定方式,因為 CSS 的 font-size 可以將文字大小設定得更細緻,當然要呈現漂亮的網頁風格就更加容易。

CSS font-size 語法規則

font-size: 文字大小設定值;
CSS font-size 屬性可以接受的文字大小設定有許多種不同單位,例如常見用於網頁的 px, em, cm, % 都可以,另外也接受 small, larger 這種形容式的設定,不過還是建議以較通俗的 px 做為主要文字大小單位,常用的一些設定值與設定效果整理如下表。

CSS font-size 實際效果範例整理

設定值語法
效果
px
font-size:12px;
12px 的文字

font-size:13px;13px 的文字

font-size:14px;14px 的文字

font-size:15px;15px 的文字

font-size:16px;16px 的文字
emfont-size:1em;1em 的文字

font-size:2em;2em 的文字
cm
font-size:0.5cm;0.5cm 的文字

font-size:1cm;1cm 的文字
%
font-size:100%;100% 的文字

font-size:130%;130% 的文字
xx-smallfont-size:xx-small;xx-small
x-smallfont-size:x-small;x-small
smallfont-size:small;small
smallerfont-size:smaller;smaller
mediumfont-size:medium;medium
largefont-size:large;large
x-largefont-size:x-large;x-large
xx-largefont-size:xx-large;xx-large
largerfont-size:larger;larger
將語法套用至文字上的方法很多,舉例來說,簡單的 span 標籤就可以,例如這樣

無論是 DIV 區塊HTML textareaHTML input type text ... 都可以套用。

上表中的各種文字大小可以應用的範圍廣泛,用數字加單位表示的文字大小,通常都是數字越大所呈現出來的文字就越大,傳統的 HTML font size 設定範圍僅在 1~7,實在太少了,設計網頁風格時很容易因此受到侷限,反觀 CSS 的 font-size 就有相當多不同的變化,比要容易調整出適合的網頁文字大小。

更多網頁文字設計
分享於 2015-01-21 - 更新於 2017-07-31