關於 font-family 的語法規則請參閱《CSS font-family 網頁文字的字型設定》篇的詳細介紹。
範例一、CSS font-family 屬性修改 DIV 區塊的文字字型範例輸出效果
這裡是 DIV 區塊內的文字,選用的是標楷體或 serif 字型
範例一在 DIV 區塊的開頭標籤內使用 style 並宣告 font-family 屬性,這裡使用了 DFKai-sb(這就是標楷體的字型名稱)以及 sans-serif 這兩種字型,讓瀏覽器依序判斷是否可以顯示,一般來說使用 Windows 作業系統的話,可以看到標楷體字型呈現,除非電腦的標楷體字型被關掉會被刪除掉,如果使用的是其他作業系統,例如 iOS 或 Android 作業系統,則要看是否有內建或安裝標楷體,如果沒有的話,就顯示 sans-serif 字型囉!假設你的作業系統沒有標楷體也沒有 sans-serif 字型,瀏覽器就會自己以作業系統內的預設字型來顯示。範例二、採用 span 設定 DIV 區塊內特定文字字型範例輸出效果
這裡是 DIV 區塊內的文字,這段用 sans-serif 字型
由於範例一採用的是 DIV 區塊預設字型的設計技巧,所以要顯示 sans-serif 字型必須要在標楷體無法顯示的情況下才會顯示,若我們想要讓 DIV 區塊內的部份特定文字使用 sans-serif 字型,就可以用 span 區域把特定文字標示起來並宣告 font-family 來顯示 sans-serif 字型的效果。有範例一與範例二的這兩種常見做法,應該可以滿足多數 DIV 區塊字型的設計需求。本篇設計基礎:CSS font-family 網頁文字的字型設定、CSS DIV 區塊
更多 CSS font-family 應用技巧