CSS font-family 網頁文字字型設定

CSS font-family 屬性是網頁文字字型設定的標準 CSS 語法，幾乎已經普及至全世界的新一代網頁設計，因為 font-family 屬性除了受到各主流瀏覽器的廣大支援之外，本身的多字型順序寫法也取代傳統 HTML font face 單一字型設定的缺點，CSS font-family 可以很輕鬆的將各種優美或誇張的文字字型套用至網頁文字中，讓網頁呈現出更完美的風格。font-family 可以單純的設定要套用的字型，若流覽者電腦沒有該字型再轉為顯示通用字型，也可以透過 CSS 本身嵌入外部檔案的特性，使用例如 Google Web fonts[1]這些字型，這些是傳統 HTML font face 做不到的，也因此 font-family 屬性幾乎已經成為現今網頁設計文字字型的標準寫法。

CSS font-family 的語法規則
font-family: 排序第一的字型,排序第二的字型,排序第三的字型,排序第四的字型 ... ;
CSS 的 font-family 屬性可以一次只設定一個字型，也可以同時設定多個不同的字型，成為一個字型組，每種字型間用半形逗號隔開，如果用這樣的設定方式，瀏覽器會從最左邊所設定的字型開始判斷，如果網友的電腦無此字型，就跳下一個字型繼續做判斷，以此類推，直到找到可以顯示的字型或最後一個字型為止，不過我們都知道不是每臺電腦都有安裝所有字型，所以聰明的網頁設計師都會同時使用幾個安全的通用字型讓瀏覽器挑選，就像是買保險一樣的意思，如果想用的字型都無法顯示，至少還有通用字型可以選用，常見的通用字型有「serif, sans-serif, cursive, fantasy, monospace」這五個，接著我們就來看如何實際應用 font-family 的範例。

CSS font-family 的字型設定範例一、同時設定多個字型
<span style="font-family:標楷體,新細明體,微軟正黑體,serif,sans-serif,cursive;">
測試瀏覽器字動挑選 font-family 字型效果
</span>
範例的字型視覺效果
測試瀏覽器字動挑選 font-family 字型效果
範例一準備的字型相當多，前三個是微軟的 Windows 作業系統基本字型，通常使用 Windows 的瀏覽者都可以看到呈現標楷體的效果，如果使用別的作業系統就有可能跳到第四個屬於通用字型的 serif 或後面的通用字型。

CSS font-family 的字型設定範例二、常用字型語法
<span style="font-family:serif;">這是範例文字 This is example font. Show serif font.</span><br>
<span style="font-family:sans-serif;">這是範例文字 This is example font. Show sans-serif font.</span><br>
<span style="font-family:cursive;">這是範例文字 This is example font. Show cursive font.</span><br>
<span style="font-family:fantasy;">這是範例文字 This is example font. Show fantasy font.</span><br>
<span style="font-family:monospace;">這是範例文字 This is example font. Show monospace font.</span><br>
<span style="font-family:MingLiU;">這是範例文字 This is example font. 顯示細明體字型</span><br>
<span style="font-family:PMingLiU;">這是範例文字 This is example font. 顯示新細明體字型</span><br>
<span style="font-family:DFKai-sb;">這是範例文字 This is example font. 顯示標楷體字型</span><br>
<span style="font-family:Microsoft JhengHei;">這是範例文字 This is example font. 顯示微軟正黑體字型</span>
範例的字型視覺效果
這是範例文字 This is example font. Show serif font.
這是範例文字 This is example font. Show sans-serif font.
這是範例文字 This is example font. Show cursive font.
這是範例文字 This is example font. Show fantasy font.
這是範例文字 This is example font. Show monospace font.
這是範例文字 This is example font. 顯示細明體字型
這是範例文字 This is example font. 顯示新細明體字型
這是範例文字 This is example font. 顯示標楷體字型
這是範例文字 This is example font. 顯示微軟正黑體字型
範例二將常用到的網頁文字字型呈現給各位參考，並非每種效果都會顯示出來，端看各位的電腦是否有內建或安裝這些字型，要如何應用這些效果就看各位設計師對網頁風格的概念，另外，範例中的細明體、新細明體、標楷體、微軟正黑體雖然採用各字體的英文名稱，不過實際上也可以直接使用中文名稱，如果想使用中文名稱，請多用幾個瀏覽器測試效果，以確認可以使用。

延伸閱讀外部參考資訊
  1. Google 官方網頁：Google Web Fonts
  2. Wibibi 介紹網頁：Google Web Fonts 提供更多字型選擇
© Copyright webtech.tw Since 2010