修改 CSS DIV 內文字字型 - 網頁設計教學站

修改 CSS DIV 內文字字型

CSS DIV 區塊內的文字字型預設是跟著瀏覽器的標準呈現,當然也可以跟著父層所設定的文字字型而呈現,如果網頁設計師希望替單獨一個 DIV 區塊,修改裡面的文字字型,可以使用 CSS 內建的 font-family 屬性來修改,效果相當不錯,font-familyCSS 修改文字字型的標準屬性,幾乎所有主流的瀏覽器都支援,我們先來看看這個 font-family 的語法要如何使用。

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 區塊,每個區塊內都透過套用 font-family 屬性並設定了不同的文字字型,最後所呈現出來的視覺效果有很明顯的差異,這就是標準的修改 CSS DIV 區塊內文字字型的技巧,你可以多使用幾個瀏覽器測試看看效果有什麼差別。

備註:範例所顯示的三個字型都是 Windows 的字型,所以在非 Windows 作業系統的環境可能無法顯示出範例的效果,透過修改範例中 font-famlily 所設定的字型,可以讓 iOS, Android, Linux 等作業系統也能顯示不同字型效果,特別是安全字型的設定,可以一次讓更多作業系統正常顯示字型,詳細用法請參閱《CSS font-family 網頁文字字型設定》篇的內容。

→範例其他語法說明
延伸閱讀
© Copyright webtech.tw Since 2010