CSS 學習筆記 > CSS font-family 網頁文字的字型設定

CSS font-family 網頁文字的字型設定是標準的 CSS 字型屬性，網頁設計師可以透過 CSS 的 font-family 屬性來調整全網頁或網頁內單一元素的文字字型，有點像傳統 HTML 的 face 屬性效果，不過 CSS font-family 有個特性是傳統 face 做不到的，就是可以一次設定多個不同的字型，成為一整組的字型，讓瀏覽器依序挑選，減少傳統 face 設定字型無法呈現的問題。

CSS font-family 使用語法CSS font-family 的字型設定可以依序填入很多個不同字型，瀏覽器（Browser）會從第一順位的字型開始判斷，如果可以顯示就直接顯示，然後忽略掉其它順位的字型，如果第一順位的字型無法顯示（通常是瀏覽者的電腦無該字型），就會進行第二個字型的判斷，以此類推。

可能會有人想問，CSS font-family 為了麼會需要有這樣的多字型設定功能？其實這個原因很簡單，因為隨著網際網路的發展，網頁字型早就超過上千種，但並不是每一台電腦都會有足夠的字型可以顯示，例如 iOS 就不一定會有新細明體，如果網頁設計師把想要呈現的字型寫入 font-family 的前面幾個順序，再把幾種通用字型放在後面的順序，這樣網頁字型無法顯示的問題就可以減少許多。

那有哪些字型是通用字型呢？答案是有「serif, sans-serif, cursive, fantasy, monospace」這五個，網頁設計師最好是把這五個字型至少挑一至兩個寫在 font-family 的順序內。

CSS font-family 應用範例一、常用網頁文字字型
範例的實際效果範例提供了許多常見的網頁文字字型，若不是要設計特殊風格的網頁，其實這些字型也就相當夠用了，範例是以 span 標籤包住每個要顯示的文字，font-family 還可以用在其它的地方，例如 DIV 區塊、textarea 或 input type text 等文字區塊，甚至可以直接在 body 標籤內控制整個網頁的預設文字字型，範例二告訴你如何在 body 標籤內使用 CSS font-family 屬性。

CSS font-family 應用範例二、在 body tag 內設定網頁預設字型範例二是一個簡單的 HTML 網頁架構，在開頭的 body 標籤內直接使用 style 宣告 font-family 即可，就像範例二中紅色標註的那一段，同時我們也把多個通用字型全部放入 font-family 的順序內，網頁設計師可以根據自己的需求調整順序或自己放入其他的字型。

更多 CSS font-family 字型應用技巧

• 用 CSS 的 font-family 屬性修改網頁表格文字的字型
• 用 CSS 的 font-family 屬性修改 DIV 區塊的文字字型
• 用 CSS 的 font-family 屬性修改 textarea 文字欄位字型
• 用 CSS 的 font-family 修改 input type text 文字欄位字型

累積熱門文章

• 如何用 css style 替文字增加刪除線
• 用 DIV 排版兩欄式網頁設計
• 用 DIV 排版三欄式網頁設計
• CSS text-align 水平對齊設計
• css color 文字顏色
• CSS DIV 區塊
• 用 DIV 排版單欄式網頁設計
• CSS 的註解寫法規則
• CSS DIV 區塊內的文字或圖片置中
• css background-color 背景顏色

今日熱門文章

• CSS z-index 垂直螢幕方向位置 (z軸高度)
• 三種常用的 CSS 選擇器(CSS selector)
• 為什麼要學習 CSS 網頁設計
• CSS DIV 區塊
• css color 文字顏色
• css padding 內距
• css margin 外距
• CSS 的註解寫法規則
• CSS border 元素邊框設計
• 如何用 css style 替文字增加刪除線

CSS 是目前非常熱門的網頁設計語言，幾乎所有主流的瀏覽器都支援 CSS 語法，比起傳統的網頁設計方式，CSS 能夠提供設計師更多的優勢以設計出更獨具風格的網頁，也讓網站維護更加有效率，CSS 讓網頁設計更進化了。