CSS 學習筆記 > 修改 CSS DIV 區塊內的文字字型

修改 CSS DIV 區塊內的文字字型須採用 CSS 的 font-family 屬性，讓 DIV 區塊內的字型有更多變化，常用的通用網頁字型如 serif, sans-serif, 標楷體、新細明體、微軟正黑體 ... 等，都可以透過 font-family 屬性套用至 DIV 區塊內，讓 DIV 區塊內的文字不再是醜醜的預設文字，另外，網頁設計師也常利用 font-size, color 等屬性與 font-family 搭配，如此一來，除了可以修改字型之外，還可以修改文字的大小與顏色。

修改 CSS DIV 區塊內的文字字型範例一、單純的修改文字字型範例的視覺效果範例一在 DIV 區塊的開頭標籤內使用 font-family 屬性並設定為標楷體，所以整個 DIV 區塊內的文字字形都會預設為標楷體，如果將 font-family 設定為其他字型也可以，看各位設計師的需求而定，除了第一段提到的常用字型之外，其實這幾年早就發展出上千種的網頁文字字型，各種風格的都有，而且 font-family 還支援多字型組合的寫法，可以將通用字型與特殊字型搭配在一起使用，若想研究 font-family 完整功能，請參閱：CSS font-family 網頁文字的字型設定。

修改 CSS DIV 區塊內的文字字型範例二、增加文字大小與顏色的修改範例的視覺效果範例二延續範例一的程式碼，再加上控制文字大小的 font-size 以及控制文字顏色的 color 屬性，把範例一的字體加大至 18px，顏色亦改為藍色，字型保留標楷體，效果是不是差很多呢？font-family 其實常常與這幾個基本文字屬性搭配在一起使用，效果還不錯。

更多 DIV 區塊設計技巧

• 修改 CSS DIV 區塊內的文字顏色
• CSS DIV 區塊內的文字或圖片置中

累積熱門文章

• 如何用 css style 替文字增加刪除線
• 用 DIV 排版兩欄式網頁設計
• 用 DIV 排版三欄式網頁設計
• CSS text-align 水平對齊設計
• css color 文字顏色
• 用 DIV 排版單欄式網頁設計
• CSS 的註解寫法規則
• CSS DIV 區塊
• CSS DIV 區塊內的文字或圖片置中
• CSS z-index 垂直螢幕方向位置 (z軸高度)

今日熱門文章

• CSS font-style 設計文字樣式
• CSS 的註解寫法規則
• CSS color 屬性設計網頁文字顏色
• 用 CSS 的 font-family 修改 input type text 文字欄位字型
• CSS DIV 區塊內的文字或圖片置中
• CSS text-align 水平對齊設計
• CSS DIV 區塊
• css background-color 背景顏色
• 用 CSS 的 font-family 屬性修改 DIV 區塊的文字字型
• CSS DIV 邊框顏色

CSS 是目前非常熱門的網頁設計語言，幾乎所有主流的瀏覽器都支援 CSS 語法，比起傳統的網頁設計方式，CSS 能夠提供設計師更多的優勢以設計出更獨具風格的網頁，也讓網站維護更加有效率，CSS 讓網頁設計更進化了。