CSS 學習筆記 > 用 CSS 的 font-family 屬性修改 DIV 區塊的文字字型

用 CSS 的 font-family 屬性修改 DIV 區塊的文字字型非常簡單，DIV 區塊也是 font-family 屬性被使用率非常高的網頁元素，網頁設計師通常會給 DIV 區塊一個預設的文字字型，然後再透過 span 標籤把其中特定的文字標示起來，下其它的 font-family 屬性來做細部文字調整，本篇說明文章就把這兩種做法的範例提供給各位讀者朋友們參考。

關於 font-family 的語法規則請參閱《CSS font-family 網頁文字的字型設定》篇的詳細介紹。

範例一、CSS font-family 屬性修改 DIV 區塊的文字字型範例輸出效果範例一在 DIV 區塊的開頭標籤內使用 style 並宣告 font-family 屬性，這裡使用了 DFKai-sb（這就是標楷體的字型名稱）以及 sans-serif 這兩種字型，讓瀏覽器依序判斷是否可以顯示，一般來說使用 Windows 作業系統的話，可以看到標楷體字型呈現，除非電腦的標楷體字型被關掉會被刪除掉，如果使用的是其他作業系統，例如 iOS 或 Android 作業系統，則要看是否有內建或安裝標楷體，如果沒有的話，就顯示 sans-serif 字型囉！假設你的作業系統沒有標楷體也沒有 sans-serif 字型，瀏覽器就會自己以作業系統內的預設字型來顯示。

範例二、採用 span 設定 DIV 區塊內特定文字字型範例輸出效果由於範例一採用的是 DIV 區塊預設字型的設計技巧，所以要顯示 sans-serif 字型必須要在標楷體無法顯示的情況下才會顯示，若我們想要讓 DIV 區塊內的部份特定文字使用 sans-serif 字型，就可以用 span 區域把特定文字標示起來並宣告 font-family 來顯示 sans-serif 字型的效果。有範例一與範例二的這兩種常見做法，應該可以滿足多數 DIV 區塊字型的設計需求。

本篇設計基礎：CSS font-family 網頁文字的字型設定、CSS DIV 區塊

更多 CSS font-family 應用技巧

• 用 CSS 的 font-family 屬性修改網頁表格文字的字型
• 用 CSS 的 font-family 屬性修改 textarea 文字欄位字型
• 用 CSS 的 font-family 修改 input type text 文字欄位字型

累積熱門文章

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

今日熱門文章

• 如何用 css style 替文字增加刪除線
• css color 文字顏色
• CSS font-style 設計文字樣式
• CSS DIV 區塊
• 用 DIV 排版兩欄式網頁設計
• CSS DIV 區塊內的文字或圖片置中
• CSS 的註解寫法規則
• css background-color 背景顏色
• css padding 內距
• CSS DIV 邊框顏色

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