CSS font-family 屬性語法
font-family: 字型1, 字型2, 字型3, ... ;
font-family 的特色是可以一次設定許多個不同的文字字型,讓瀏覽器自己去挑選可以顯示的字型,減少字型顯示錯誤的問題,如果對於基本的語法沒有問題,我們接著就來看看如何把這個 font-family 套用到 DIV 區塊,去修改區塊內的文字字型,應該會相當有趣。修改 CSS DIV 區塊內文字字型範例
<div style="border:1px #ccc solid;font-family:新細明體;margin:15px 0px;">這是新細明體的字型</div>
<div style="border:1px #ccc solid;font-family:標楷體;margin:15px 0px;">這是標楷體的字型</div>
<div style="border:1px #ccc solid;font-family:微軟正黑體;margin:15px 0px;">這是微軟正黑體的字型</div>
範例的視覺效果<div style="border:1px #ccc solid;font-family:標楷體;margin:15px 0px;">這是標楷體的字型</div>
<div style="border:1px #ccc solid;font-family:微軟正黑體;margin:15px 0px;">這是微軟正黑體的字型</div>
這是新細明體的字型
這是標楷體的字型
這是微軟正黑體的字型
我們這裡準備了好幾個不同的 DIV 區塊,每個區塊內都透過套用 font-family 屬性並設定了不同的文字字型,最後所呈現出來的視覺效果有很明顯的差異,這就是標準的修改 CSS DIV 區塊內文字字型的技巧,你可以多使用幾個瀏覽器測試看看效果有什麼差別。備註:範例所顯示的三個字型都是 Windows 的字型,所以在非 Windows 作業系統的環境可能無法顯示出範例的效果,透過修改範例中 font-famlily 所設定的字型,可以讓 iOS, Android, Linux 等作業系統也能顯示不同字型效果,特別是安全字型的設定,可以一次讓更多作業系統正常顯示字型,詳細用法請參閱《CSS font-family 網頁文字字型設定》篇的內容。
→範例其他語法說明
- border 是設定邊框,參閱:CSS border 邊框設計。
- margin 是設定外距,參閱:CSS margin 邊界使用介紹範例教學。