CSS - 8、字体属性

在CSS中，字体属性（Font Properties）用于控制文本的外观和排版，包括字体大小、字体类型、字体粗细、行高等。掌握这些属性可以让你更灵活地设计页面的文本内容。以下是CSS中常见的字体属性及其使用方法。

---

1. font-size（字体大小）

font-size属性用于设置文本的字体大小。

常用单位：

• 像素（px）：固定大小，适合精确控制。
• 相对单位（em、rem）：基于父元素或根元素的字体大小，适合响应式设计。
• 百分比（%）：相对于父元素的字体大小。

示例：

p {
    font-size: 16px;       /* 固定大小 */
    font-size: 1.2em;      /* 相对于父元素 */
    font-size: 1rem;       /* 相对于根元素 */
    font-size: 120%;       /* 相对于父元素 */
}

---

2. font-family（字体类型）

font-family属性用于指定文本的字体。可以指定一个字体名称或一组字体名称，浏览器会按顺序查找这些字体，直到找到可用的字体为止。

示例：

p {
    font-family: Arial, sans-serif;       /* 无衬线字体 */
    font-family: "Times New Roman", serif; /* 有衬线字体 */
}

字体分类：

• 无衬线字体（Sans-serif）：如Arial、Helvetica、Verdana。
• 有衬线字体（Serif）：如Times New Roman、Georgia。
• 等宽字体（Monospace）：如Courier New、Consolas。
• 装饰性字体：如Comic Sans MS、Impact。

注意：

• 如果字体名称包含空格或特殊字符，需要用引号包裹。
• 最好提供备用字体，以防用户设备上没有指定的字体。

---

3. font-weight（字体粗细）

font-weight属性用于设置字体的粗细。常见的值包括：

• normal（默认值）：普通粗细。
• bold：加粗。
• bolder：更粗。
• lighter：更细。
• 数字（100到900）：表示从最细到最粗的级别。

示例：

p {
    font-weight: normal; /* 普通 */
    font-weight: bold;   /* 加粗 */
    font-weight: 300;    /* 较细 */
    font-weight: 700;    /* 较粗 */
}

注意：

• 不是所有字体都支持所有font-weight值。例如，某些字体可能只支持normal和bold。

---

4. font-style（字体风格）

font-style属性用于设置字体的风格，常见的值包括：

• normal（默认值）：正常风格。
• italic：斜体。
• oblique：倾斜（与斜体类似，但效果可能略有不同）。

示例：

p {
    font-style: normal; /* 正常 */
    font-style: italic; /* 斜体 */
    font-style: oblique; /* 倾斜 */
}

---

5. text-decoration（文本修饰）

text-decoration属性用于设置文本的修饰效果，常见的值包括：

• none（默认值）：无修饰。
• underline：下划线。
• overline：上划线。
• line-through：删除线。
• blink：闪烁（不推荐使用，部分浏览器不支持）。

示例：

a {
    text-decoration: none; /* 去掉链接的下划线 */
}

span {
    text-decoration: underline; /* 添加下划线 */
    text-decoration: line-through; /* 添加删除线 */
}

---

6. text-align（文本对齐方式）

text-align属性用于设置文本的水平对齐方式，常见的值包括：

• left（默认值）：左对齐。
• right：右对齐。
• center：居中对齐。
• justify：两端对齐。

示例：

p {
    text-align: left;    /* 左对齐 */
    text-align: center;  /* 居中对齐 */
    text-align: right;   /* 右对齐 */
}

---

7. line-height（行高）

line-height属性用于设置行间距，可以提高文本的可读性。

常用单位：

• 数字：相对于字体大小的倍数（无单位）。
• 像素（px）：固定行高。
• 百分比（%）：相对于字体大小的百分比。

示例：

p {
    line-height: 1.5;    /* 相对于字体大小的1.5倍 */
    line-height: 24px;   /* 固定行高 */
    line-height: 150%;   /* 相对于字体大小的150% */
}

---

8. letter-spacing（字母间距）

letter-spacing属性用于设置字符之间的间距。

常用单位：

• 像素（px）：固定间距。
• 百分比（%）：相对于字体大小的百分比。

示例：

p {
    letter-spacing: 1px; /* 字符间距为1像素 */
    letter-spacing: 0.1em; /* 相对于字体大小的0.1倍 */
}

---

9. word-spacing（单词间距）

word-spacing属性用于设置单词之间的间距，仅对英文等使用空格分隔单词的语言有效。

示例：

p {
    word-spacing: 5px; /* 单词间距为5像素 */
}

---

10. text-transform（文本转换）

text-transform属性用于控制文本的大小写转换，常见的值包括：

• none（默认值）：不转换。
• uppercase：全部大写。
• lowercase：全部小写。
• capitalize：首字母大写。

示例：

p {
    text-transform: uppercase; /* 全部大写 */
    text-transform: capitalize; /* 首字母大写 */
}

---

11. font（简写属性）

font属性是一个简写属性，可以同时设置多个字体相关属性（如font-size、font-family、font-weight等）。

语法：

font: [font-style] [font-variant] [font-weight] [font-size] / [line-height] [font-family];

示例：

p {
    font: italic normal bold 16px / 1.5 Arial, sans-serif;
    /* 等价于： */
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

注意：

• 简写属性中，font-size和font-family是必须的，其他属性可以省略。
• 如果省略某些属性，它们将被设置为默认值。

---

字体属性的总结

CSS提供了丰富的字体属性，用于控制文本的外观和排版。以下是主要的字体属性及其用途：

属性	用途
font-size	设置字体大小（单位：px、em、rem、%）
font-family	设置字体类型（如Arial、Times New Roman）
font-weight	设置字体粗细（如normal、bold、100到900）
font-style	设置字体风格（如normal、italic、oblique）
text-decoration	设置文本修饰（如underline、line-through）
text-align	设置文本对齐方式（如left、center、right）
line-height	设置行间距（单位：px、em、%）
letter-spacing	设置字符间距（单位：px、em）
word-spacing	设置单词间距（单位：px）