CSS Properties - 文字與字型

以下是一些常見的 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

使用 單位表示法，設定首行文字縮排。