CSS 文字控制屬性

📢 本文由 gemini-2.5-flash 翻譯

文字控制屬性可控制的內容如下

名稱	屬性
字體大小	font-size
字體粗細	font-weight
字體傾斜	font-style
行高	line-height
字體系列	font-family
字體複合屬性	font
文字縮排	text-indent
文字對齊	text-align
裝飾線	text-decoration
顏色	color

字體大小

屬性值為文字尺寸，單位一般為 px

1
2
3
p {
    font-size: 30px;
}

字體粗細

屬性值為數字或關鍵字

1
2
3
4
5
6
7
8
p {
    font-weight: 400; /* 文字設為正常 */
    /* font-weight: normal; */
}
div {
    font-weight: 700; /* 文字設為加粗 */
    /* font-weight: bold; */
}

字體傾斜

通常用於移除文字預設的斜體效果

1
2
3
4
5
6
em {
    font-style: normal; /* 將 em 標籤的傾斜效果移除 */
}
p {
    font-style: italic; /* 將 p 標籤內的文字傾斜 */
}

行高

設定多行文字的間距，屬性值有兩種

1
2
3
4
5
6
P {
    line-height: 30px; /* 行高為 30px */
}
div {
    line-height: 2; /* 行高為字體大小的兩倍 (font-size 預設為 16px) */
}

行高是指文字高度+上間距+下間距

當行高屬性值等於區塊 (div) 高度屬性值時，可以達成垂直置中

1
2
3
4
div {
    line-height: 100px;
    height: 100px;
}

字體系列

用於控制文字的字型，屬性值為字型名稱

1
2
3
p {
    font-family: 楷體;
}

一般來說會設定多個

1
2
3
p {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

執行順序為從左到右，即瀏覽器會偵測系統是否有目前字型，若沒有，會偵測是否有下一個，直到最後一個，上述最後一個為 無襯線字體 的字體系列名稱

font 複合屬性

開發時設定字型有以下情況

1
2
3
4
5
6
7
div {
    font-style: italic; /* 文字傾斜 */
    font-weight: 700; /* 文字加粗 */
    font-size: 30px; /* 字體大小為 30px */
    line-height: 2; /* 行高為字體大小的 2 倍 */
    font-family: 楷體; /* 設定字型 */
}

可以簡寫為

1
2
3
4
div {
    font: italic 700 30px/2 楷體;
    /* 是否傾斜 加粗 字體大小/行高 字型 */
}

這個屬性通常用於設定網頁文字的共用樣式，屬性值必須按照順序書寫，其中字體大小和字型值必須書寫，其他可以省略

文字縮排

屬性值有兩種，px 或 em，em 為目前標籤的字體大小

1
2
3
4
5
p {
    font-size: 20px;
    text-indent: 2em; /* 首行縮排兩個字元 */
    /* text-indent: 40px; 與上一行程式碼效果一致 */
}

文字對齊方式

text-align 屬性有三個值：left、center、right

1
2
3
div {
    text-align: center; /* 文字置中對齊 */
}

這個屬性不只可以應用於文字對齊，例如以下用法可以讓圖片置中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
    <head>
        <title></title>
        <style>
            div {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="path" />
        </div>
    </body>
</html>

text-align 本質上是控制內容的對齊方式，屬性要設定給內容的父層，上例 img 的父層為 div

文字裝飾線

效果	無	底線	刪除線	上劃線
屬性值	none	underline	line-through	overline

1
2
3
4
5
6
a {
    text-decoration: none; /* 移除連結的底線 */
}
del {
    text-decoration: none; /* 移除 del 標籤的底線，讓 del 標籤無效 */
}

文字顏色

顏色表示方式	屬性值	說明
關鍵字	英文單字	red、green、aqua 等
rgb 表示法	rgb(r, g, b)	r, g, b 表示紅綠藍三原色，取值範圍 0-255
rgba 表示法	rgba(r, g, b, a)	a 表示透明度，取值範圍 0-1
十六進位表示法	#RRGGBB	兩兩一組，若相同可縮寫。#ffcc00 -> #fc0

1
2
3
4
5
6
p {
    color: rgba(250, 200, 0, 0.5);
}
div {
    color: #acf; /* 等同於 #aaccff */
}