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 區域內的文字,讓整個網頁不同區域呈現不同的效果。

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