CSS 字型
為您的網站選擇合適的字型很重要！
字型選擇很重要
選擇合適的字型對讀者體驗網站的方式有巨大影響。
合適的字型可以為您的品牌樹立鮮明的形象。
使用易於閱讀的字型很重要。字型能為您的文字增添價值。選擇正確的顏色和文字大小也很重要。
通用字體系列
CSS 中有五種通用字體系列
- 襯線字型 (Serif) 在每個字母的邊緣都有一個小的筆觸。它們營造出一種正式和優雅的感覺。
- 無襯線字型 (Sans-serif) 具有乾淨的線條（沒有小的附加筆觸）。它們營造出一種現代和簡約的外觀。
- 等寬字型 (Monospace) - 所有字母都具有相同的固定寬度。它們營造出一種機械感。
- 手寫字型 (Cursive) 模仿人類手寫。
- 奇幻字型 (Fantasy) 是裝飾性/趣味性字型。
所有不同的字型名稱都屬於其中一個通用字體系列。
襯線字型和無襯線字型之間的區別
注意：在電腦螢幕上，無襯線字型被認為比襯線字型更容易閱讀。
一些字型示例
| 通用字體系列 | 字型名稱示例 |
|---|---|
| 襯線字型 (Serif) | Times New Roman Georgia Garamond |
| 無襯線字型 (Sans-serif) | Arial Verdana Helvetica |
| 等寬字型 (Monospace) | Courier New Lucida Console Monaco |
| 手寫字型 (Cursive) | Brush Script MT Lucida Handwriting |
| 奇幻字型 (Fantasy) | Copperplate Papyrus |
CSS font-family 屬性
在 CSS 中，我們使用 font-family 屬性來指定文字的字型。
注意：如果字型名稱包含多個單詞，則必須用引號括起來，例如："Times New Roman"。
提示： font-family 屬性應該包含多個字型名稱作為“備用”系統，以確保瀏覽器/作業系統之間的最大相容性。從您想要的字型開始，最後使用一個通用字體系列（如果其他字型都不可用，則讓瀏覽器選擇該通用系列中類似的字型）。字型名稱應以逗號分隔。在下一章中閱讀更多關於備用字型的資訊。
示例
為三個段落指定不同的字型
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
自己動手試一試 »
