CSS 文字與字體屬性：字級、行高、字型與對齊
以下是一些常見的 CSS 文字相關屬性及其功能。
color
使用 顏色表示法，設定文字的顏色。
font-size
使用 單位表示法，設定文字的大小。
font-family
設定文字的字型。
字型的設定會依照您指定的順序有左至右進行套用。這是時候就有人會問，有寫上去的都會套用嗎? 當然不是，瀏覽器的運作方式會依順序尋找並套用網頁使用者電腦內擁有的字型，有就套用，若無，則尋找下一個。
注意事項
- 當字型為組合字時，也就是字型名稱中間出現 空格 時，要在該字型名稱的外圍加上 單引號 或 雙引號。
- 若字型為中文名稱時，建議改為英文名稱替代，以免遇到編碼問題。
- 除了自定義的字型順序之外，也建議將 通用字型 放在最末端。若無設定，便會以瀏覽器的預設字體為主。
font-style
設定文字的斜體。
normal: 預設樣式。italic: 斜體。oblique: 斜角，如果字型不支援就等同於italic。
font-weight
設定文字的粗細。
normal: 預設樣式，細體;bold: 粗體;lighter: 繼承父元素的粗細再更細;bolder: 繼承父元素的粗細再更粗;100~900: 以 100 為單位，數字愈大，文字愈粗;
line-height
設定行距。
顧名思義，就是對一個區域內的文字內容進行行與行之間的調整。數值愈大，行距就愈大；反之，則愈小。可以搭配 單位表示法 進行使用。
text-align
設定內容文字的水平對齊方式。
left: 靠左對齊 (預設)。center: 置中對齊。right: 靠右對齊。jsutify: 齊行。
text-decoration
設定文字的裝飾，如下劃線、刪除線等。
none: 無。overline: 上畫線。line-though: 刪除線。underline: 底線。
text-decoration-style
設定裝飾線的樣式。
solid: 實線。double: 雙畫線。dotted: 點狀線。dashed: 虛線。wavy: 波浪線。
text-decoration-color
設定裝飾線的色彩。
text-decoration-thickness
設定裝飾線的粗細。
text-decoration-line
設定裝飾線位置。
letter-spacing
使用 單位表示法，設定字元之間的間距。
word-spacing
使用 單位表示法，設定單字之間的間距。
text-transform
設定英文字的大小寫轉換。
text-indent
使用 單位表示法，設定首行文字縮排。
字型堆疊
font-family 的多個值是一份 候補名單，由左往右尋找，最後一定要放通用字型：
css
body {
font-family: system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}行高的寫法
css
/* ✅ 不帶單位，子元素依自己的字級換算 */
body { line-height: 1.7; }
/* ❌ 帶單位，子元素會繼承到固定高度 */
body { line-height: 28px; }中文內文建議約 1.6 到 1.8 倍，標題可降到 1.2 至 1.3。
常用屬性速查
| 屬性 | 用途 |
|---|---|
color | 文字顏色，見 色彩表示法 |
font-size | 字級，見 單位表示法 |
font-family | 字型堆疊 |
font-weight | 字重 |
line-height | 行高 |
text-align | 水平對齊 |
letter-spacing | 字距 |
text-decoration | 底線、刪除線 |
white-space | 空白與換行的處理方式 |
text-overflow | 文字溢出時的呈現 |
常見問題
行高該設多少？
中文內文建議約 1.6 到 1.8 倍，標題可以降到 1.2 至 1.3。建議寫成不帶單位的倍數，這樣子元素會依自己的字級換算，不會繼承到固定的高度。
字型為什麼要寫一整串？
那叫字型堆疊。瀏覽器會由左往右找使用者電腦裡有的字型，找不到就往下一個，最後務必放上通用字型當保底。
中文字型名稱該用中文還是英文？
建議寫英文名稱，或兩者都寫。中文名稱在不同系統與編碼下可能對不上，導致字型沒有生效。
font-size 用 px 還是 rem？
建議用 rem。它以根元素的字級為基準，使用者調整瀏覽器字級時整站會等比放大，對無障礙比較友善，詳見 單位表示法。
