CSS DIV 文字字型設計

CSS DIV 文字字型設計需要用到 CSS 的 font-family 屬性，這是一個標準的字型選用屬性，font-family 可以一次提供數個字型讓網頁瀏覽器判斷哪個字型可以顯示，網頁設計師可以透過 font-family 的這種特性，一次幫 DIV 文字設計多個字型排序。看到這裡，也許會有人想問，難道 CSS DIV 文字字型不可以自己設計？其實要設計一套自行文字字型不是件容易的事情，網頁的文字字型通常都是直接套用電腦內的既有字型或是導入其他外部字型，例如 Google Web Fonts 就是非常著名的網頁文字字型套用工具，要將文字字型套用至網頁中，用的就是 font-family 屬性，本篇教學將提供數種不同的 CSS DIV 文字字型範例給各位參考。

CSS DIV 文字字型設計範例

<div style="font-family:serif;border:2px #ccc solid;padding:10px;">選用 serif 字型</div>
<div style="font-family:sans-serif;border:2px #ccc solid;padding:10px;">選用 sans-serif 字型</div>
<div style="font-family:monospace;border:2px #ccc solid;padding:10px;">選用 monospace 字型</div>
<div style="font-family:PMingLiU;border:2px #ccc solid;padding:10px;">選用新細明體字型</div>
<div style="font-family:DFKai-sb;border:2px #ccc solid;padding:10px;">選用標楷體字型</div>

呈現結果

選用 serif 字型

選用 sans-serif 字型

選用 monospace 字型

選用新細明體字型

選用標楷體字型

我們準備了五組不同文字字型的 DIV 區塊，每個 DIV 區塊內的字型都是用 font-family 的屬性值來設計，前三種字型都屬於安全字型，幾乎所有的瀏覽器都支援，而最後兩個新細明體與標楷體屬於微軟字型，是 Windows 內建的字型，如果使用 iOS 或 Linux 作業系統，可能需要額外安裝才會顯示。除了範例這些，還有更多 font-family 的字型可以用，請看：CSS font-family 字型。

➤學會了幫 DIV 設計文字字型，想要增加文字顏色嗎？快看這篇：CSS DIV 文字顏色設計。

更多 CSS DIV 區塊設計技巧