CSS文本样式

### 文本样式

在 CSS 中，文本样式是网页设计中非常重要的一部分，它不仅影响内容的可读性，还对整体视觉效果起到关键作用。以下将详细介绍字体属性、文本属性以及行高与字间距的设置。

------

#### 1. 字体属性（Font Properties）

##### （1）`font-family`

- **作用**：指定字体的名称或字体族（font family）。

- **语法**：

css复制

```css
  font-family: font1, font2, font3, ..., generic-family;
  ```

- **示例**：

css复制

```css
  p {
      font-family: Arial, sans-serif; /* 使用 Arial 字体，如果没有则使用系统默认的无衬线字体 */
  }
  ```

##### （2）`font-size`

- **作用**：设置字体大小。

- **单位**：

- 像素（`px`）：固定大小，不随浏览器缩放。
  - 相对单位（`em`、`rem`）：`em` 相对于父元素字体大小，`rem` 相对于根元素（`html`）字体大小。
  - 百分比（`%`）：相对于父元素字体大小。

- **示例**：

css复制

```css
  h1 {
      font-size: 24px; /* 固定大小 */
  }
  p {
      font-size: 1em; /* 相对于父元素字体大小 */
  }
  ```

##### （3）`font-weight`

- **作用**：设置字体的粗细。

- **常见值**：

- `normal`（默认值）：正常粗细。
  - `bold`：加粗。
  - `bolder`：更粗。
  - `lighter`：更细。
  - 数字（100-900）：表示字体粗细的级别，`400` 等同于 `normal`，`700` 等同于 `bold`。

- **示例**：

css复制

```css
  p {
      font-weight: bold; /* 加粗 */
  }
  ```

##### （4）`font-style`

- **作用**：设置字体的样式。

- **常见值**：

- `normal`（默认值）：正常样式。
  - `italic`：斜体。
  - `oblique`：倾斜（与斜体类似，但效果略有不同）。

- **示例**：

css复制

```css
  p {
      font-style: italic; /* 斜体 */
  }
  ```

##### （5）`font-variant`

- **作用**：设置字体的小写大写变体。

- **常见值**：

- `normal`（默认值）：正常字体。
  - `small-caps`：小写字符显示为大写字符的缩小版。

- **示例**：

css复制

```css
  p {
      font-variant: small-caps; /* 小写大写变体 */
  }
  ```

##### （6）`line-height`

- **作用**：设置行高，影响文本的垂直间距。

- **单位**：

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

- **示例**：

css复制

```css
  p {
      line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
  }
  ```

------

#### 2. 文本属性（Text Properties）

##### （1）`text-align`

- **作用**：设置文本的水平对齐方式。

- **常见值**：

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

- **示例**：

css复制

```css
  p {
      text-align: center; /* 文本居中对齐 */
  }
  ```

##### （2）`text-decoration`

- **作用**：设置文本的装饰效果。

- **常见值**：

- `none`（默认值）：无装饰。
  - `underline`：下划线。
  - `overline`：上划线。
  - `line-through`：删除线。
  - `blink`（已废弃）：闪烁效果。

- **示例**：

css复制

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

##### （3）`color`

- **作用**：设置文本颜色。

- **值类型**：

- 十六进制（如 `#ff0000`）。
  - RGB（如 `rgb(255, 0, 0)`）。
  - RGBA（如 `rgba(255, 0, 0, 0.5)`）。
  - 预定义颜色名（如 `red`）。

- **示例**：

css复制

```css
  p {
      color: #ff0000; /* 红色 */
  }
  ```

##### （4）`text-transform`

- **作用**：控制文本的大小写转换。

- **常见值**：

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

- **示例**：

css复制

```css
  p {
      text-transform: uppercase; /* 全部大写 */
  }
  ```

##### （5）`letter-spacing`

- **作用**：设置字符间距。

- **单位**：

- 像素（`px`）。
  - 相对单位（`em`）。

- **示例**：

css复制

```css
  p {
      letter-spacing: 2px; /* 字符间距为 2px */
  }
  ```

##### （6）`word-spacing`

- **作用**：设置单词间距（仅对英文等使用空格分隔单词的语言有效）。

- **单位**：

- 像素（`px`）。
  - 相对单位（`em`）。

- **示例**：

css复制

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

------

#### 3. 行高与字间距

##### （1）行高（`line-height`）

- **作用**：控制行间距，影响文本的垂直可读性。

- **推荐值**：

- 一般情况下，行高设置为字体大小的 1.2-1.5 倍较为合适。
  - 对于较大的字体，可以适当增加行高。

- **示例**：

css复制

```css
  p {
      font-size: 16px;
      line-height: 1.5; /* 行高为 24px */
  }
  ```

##### （2）字间距（`letter-spacing`）

- **作用**：调整字符之间的间距，影响文本的密集度和可读性。

- **应用场景**：

- 在标题或短文本中，适当增加字间距可以提升视觉效果。
  - 对于正文，一般保持默认值或微调。

- **示例**：

css复制

```css
  h1 {
      letter-spacing: 1px; /* 标题增加字间距 */
  }
  ```

------

#### 4. 综合示例

HTML复制

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置全局字体 */
            color: #333; /* 设置全局文本颜色 */
        }
        h1 {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            letter-spacing: 1px;
            color: #ff0000;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
            text-align: justify;
            text-indent: 2em; /* 首行缩进 */
            color: #666;
        }
        a {
            text-decoration: none;
            color: #0000ff;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落，用于展示文本样式的设置。通过合理调整字体、行高、字间距等属性，可以提升文本的可读性和视觉效果。</p>
    <p>这是一个<a href="#">链接</a>，鼠标悬停时会显示下划线。</p>
</body>
</html>
```

------

#### 5. 总结

- **字体属性**：通过 `font-family`、`font-size`、`font