`font-family` 属性用于指定文本的字体样式

在 CSS 中，`font-family` 属性用于指定文本的字体样式。它可以接受一个或多个字体名称作为值，浏览器会选择列表中第一个它支持的字体。如果字体名称包含空格或者是非标准字体，则需要用引号将其括起来。

 

### 示例

```css

/* 设置段落的字体样式为 "Times New Roman" */

p {

  font-family: "Times New Roman";

}

 

/* 设置段落的字体样式为 Arial，如果 Arial 不可用，则回退到 sans-serif 类型的字体 */

p {

  font-family: Arial, sans-serif;

}

 

/* 设置段落的字体样式为 "Courier New"，如果 "Courier New" 不可用，则回退到 Monaco，如果 Monaco 不可用，则回退到 monospace */

p {

  font-family: "Courier New", Monaco, monospace;

}

```

 

### 字体回退机制

当指定字体时，可以定义一个回退系统，以防所选字体无法在用户的系统上显示。这个系统通常是一系列的字体名称，浏览器会从列表的开始选择第一个可用的字体。如果列表中的所有字体都不可用，浏览器会使用默认的无衬线字体（如 `Times`）或有衬线字体（如 `Arial`）。

 

### 通用字体家族

除了特定的字体名称，CSS 中还有一些通用的字体家族关键字：

- `serif`: 有衬线的字体，如 `Times New Roman`。

- `sans-serif`: 无衬线的字体，如 `Arial`。

- `monospace`: 等宽字体，每个字符的宽度相同，如 `Courier New`。

- `cursive`: 手写体字体，如 `Brush Script`。

- `fantasy`: 装饰性字体，如 `Copperplate`。

 

### 使用系统字体

除了指定具体的字体名称，还可以使用一些特殊的关键字来使用用户系统中的默认字体：

- `system-ui`: 用户界面字体，通常是用户操作系统中设置的默认字体。

- `ui-serif`, `ui-sans-serif`, `ui-monospace`, `ui-rounded`: 分别对应 `serif`, `sans-serif`, `monospace`, `rounded` 类型的系统字体。

 

### 注意事项

- 当使用非标准字体时，需要确保它们已经被用户的系统安装，否则可能会导致字体显示不正确。

- 指定多个字体时，应将用户的偏好字体放在列表的最前面，以提高加载速度和兼容性。

- 使用 `system-ui` 等系统字体时，要准备好在用户的系统中没有合适对应字体的情况。

 

### 最佳实践

- 选择合适的字体样式和大小可以提高网页的可读性和美观程度。

- 考虑到无障碍性和可访问性，可以选择易于阅读的字体，并确保字体在不同设备和浏览器上的兼容性。

- 使用 `font-family` 属性时，始终指定一个回退系统，以防万一所选字体不可用。