CSS font-size 網頁文字大小設計 - CSS 學習筆記

CSS font-size 是網頁文字大小設計的標準屬性，也受到廣大的主流瀏覽器所支援，CSS 的 font-size 已經逐漸取代傳統的 HTML 的 font 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 的文字
em	font-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-small	font-size:xx-small;	xx-small
x-small	font-size:x-small;	x-small
small	font-size:small;	small
smaller	font-size:smaller;	smaller
medium	font-size:medium;	medium
large	font-size:large;	large
x-large	font-size:x-large;	x-large
xx-large	font-size:xx-large;	xx-large
larger	font-size:larger;	larger

將語法套用至文字上的方法很多，舉例來說，簡單的 span 標籤就可以，例如這樣

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

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

更多網頁文字設計