CSS font-family 字型

CSS font-family 是 CSS 用來規定網頁字型的標準方法，同時可以設定多組不同的字型，當瀏覽器沒有第一種字型的時候，會自動顯示第二種字型，以此類推，以 font-family 設定網頁字型的方法，優點是快速佈署整個網頁內的字型，搭配整體的設計風格來呈現，同時設定多組不同的字型，提升跨平台的呈現風格一致，是網頁設計師相當普遍的設計手法，所有主流的瀏覽器都支援 CSS font-family 屬性。

CSS font-family 基本語法

font-family:第一種字型,第二種字型,第三種字型;

用逗號隔開每個你想設定的字型，接著的工作就讓瀏覽器自己去判斷。字型的設定上可以給明確的字型值，例如細明體（MingLiU）、標楷體（DFKai-sb）、微軟正黑體（Microsoft JhengHei），也可以給通用字型如 serif、sans-serif、cursive、fantasy、monospace 等。如果你想採用明確字體名稱，建議使用英文名稱而不是使用中文名稱，比較能避免瀏覽器讀取錯誤而造成的顯示失敗狀況。

CSS font-family 字型範例

字型	語法範例	呈現
serif	<span style="font-family:serif;">Show serif font</span>	Show serif font
sans-serif	<span style="font-family:sans-serif;">Show sans-serif font</span>	Show sans-serif font
cursive	<span style="font-family:cursive;">Show cursive font</span>	Show cursive font
fantasy	<span style="font-family:fantasy;">Show fantasy font</span>	Show fantasy font
monospace	<span style="font-family:monospace;">monospace font</span>	monospace font
細明體	<span style="font-family:MingLiU;">細明體字型</span>	細明體字型
新細明體	<span style="font-family:PMingLiU;">新細明體字型</span>	新細明體字型
標楷體	<span style="font-family:DFKai-sb;">標楷體字型</span>	標楷體字型
微軟正黑體	<span style="font-family:Microsoft JhengHei;">微軟正黑體</span>	微軟正黑體

要注意的是 CSS font-family 的字型設定並不會自動下載字型檔案，如果在用戶端沒有你設定的字型，有可能無法正確顯示你要的效果，所以建議除了明確字型之外，最好要加上通用字型，以確保網頁呈現。

CSS 中常見的通用字體如：serif、sans-serif、cursive、fantasy、monospace。

CSS font-famiy 範例、設定段落的字型

p {
　font-family:serif,sans-serif,cursive,fantasy,monospace;
}

有的時候設計師會需要將網頁文章不同的段落，設計出不同的風格字型，這時候採用 font-family 就是一個相當有效率的方式，同樣的手法，也可以用在像是 DIV 區塊或 span 區域內的文字，讓整個網頁不同區域呈現不同的效果。

延伸閱讀