如何修改 HTML DIV 區塊內的文字字型

HTML DIV 區塊內的文字字型是可以變更的,預設的情況下,如果沒有在 DIV 父層設定任何的文字字型,那 DIV 內的文字就會根據瀏覽器的預設字型來顯示,例如新細明體、標楷體或者是微軟正黑體這些 Windows 系列的字型,如果使用的是 Apple 的 iOS 系統顯示字型又會不一樣,如果想要讓設計出來的網站 DIV 區塊內文字在不同電腦或瀏覽器下都可以看到同樣的字型效果,最簡單的方法就是直接先透過 CSS 設定好,而要替 DIV 區塊內文字設定字型就要用到 CSSfont-family 屬性。

CSS font-family 屬性語法
font-family: 字型1 字型2 字型3 字型4 ...;
CSS 的 font-family 屬性可以一次設定好很多個不同的字型,然後讓瀏覽器依序去挑選可以顯示的字型,順序是從左到右,如果不行顯示就跳下一個,詳細用法請參閱《CSS font-family 網頁文字字型設定》篇的內容。

修改 HTML DIV 區塊內的文字字型範例
<div style="border:1px #ccc solid;padding:5px;margin-top:15px;font-family:serif;">
顯示 serif 字型
</div>
<div style="border:1px #ccc solid;padding:5px;margin-top:15px;font-family:sans-serif;">
顯示 sans-serif 字型
</div>
<div style="border:1px #ccc solid;padding:5px;margin-top:15px;font-family:DFKai-sb;">
顯示標楷體字型
</div>
範例的輸出結果
顯示 serif 字型
顯示 sans-serif 字型
顯示標楷體字型

範例中我們總共準備了三個不同字型的 DIV 區塊,第一個 DIV 區塊採用的是 serif 字型,第二個 DIV 區塊採用的是 sans-serif 字型,而第三個 DIV 區塊採用的則是標楷體字型,範例中紅色標注的地方就是修改的重點。

延伸閱讀
© Copyright webtech.tw Since 2010