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

HTML DIV 區塊內的文字字型是可以變更的，預設的情況下，如果沒有在 DIV 父層設定任何的文字字型，那 DIV 內的文字就會根據瀏覽器的預設字型來顯示，例如新細明體、標楷體或者是微軟正黑體這些 Windows 系列的字型，如果使用的是 Apple 的 iOS 系統顯示字型又會不一樣，如果想要讓設計出來的網站 DIV 區塊內文字在不同電腦或瀏覽器下都可以看到同樣的字型效果，最簡單的方法就是直接先透過 CSS 設定好，而要替 DIV 區塊內文字設定字型就要用到 CSS 的 font-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 區塊採用的則是標楷體字型，範例中紅色標注的地方就是修改的重點。

延伸閱讀