CSS进阶指南：深入理解字体属性

### 字体系列（font-family）

`font-family` 属性用于指定元素的字体。它可以接受一个具体的字体名称和一个通用字体族名称。例如：

```css
font-family: 'Gill Sans Extrabold', sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif;
```

通用字体族包括 `serif`、`sans-serif`、`monospace`、`cursive` 和 `fantasy`。这些字体族涵盖了大多数常见字体类型。

```css
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
```

`font-family` 属性具有继承性，这意味着子元素会继承父元素的字体设置，除非被更具体的样式覆盖。

### 使用通用字体族

在文档中使用通用字体族可以通过 `font-family` 属性实现。例如：

```css
h1 { font-family: Georgia, serif; }
```

### 指定特定字体

为了确保在特定字体不可用时仍有合适的替代方案，通常会结合特定字体和通用字体族。例如：

```css
p { font-family: Times, 'Times New Roman', 'New York', serif; }
```

当字体名称包含空格或其他特殊字符时，需要用引号括起来。例如：

```css
font-family: 'Zurich UltraBlack', sans-serif;
```

### 字体粗细（font-weight）

`font-weight` 属性用于控制字体的粗细。常见的值包括 `normal`、`bold`、`bolder` 和 `lighter`。此外，还可以使用从 `100` 到 `900` 的数字来指定更详细的粗细级别。例如：

```css
font-weight: normal;
font-weight: bold;
font-weight: 300;
font-weight: 700;
```

### 加粗如何工作

`font-weight` 的值 `100` 到 `900` 对应于字体的九个粗细级别。如果字体支持这些级别，数字会直接映射到相应的粗细。如果不支持，浏览器会尝试找到最接近的粗细级别。例如，`400` 通常对应 `normal`，`700` 对应 `bold`。

### 让字体更粗或更细

使用 `bolder` 和 `lighter` 关键字可以相对父元素的 `font-weight` 值调整字体粗细。例如：

```css
p { font-weight: normal; }
p em { font-weight: bolder; }
```

### 字体大小（font-size）

`font-size` 属性用于设置字体的大小。它可以接受绝对大小值、相对大小值、长度值和百分比值。例如：

```css
font-size: xx-small;
font-size: medium;
font-size: 16px;
font-size: 80%;
```

### 绝对大小

绝对大小值包括 `xx-small`、`x-small`、`small`、`medium`、`large`、`x-large` 和 `xx-large`。这些值是相对于用户的默认字体大小（通常是 `medium`）的。

### 相对大小

相对大小值 `larger` 和 `smaller` 会使字体大小相对于父元素的大小变化。例如：

```css
p { font-size: 16px; }
p em { font-size: larger; }
```

### 百分比和大小

百分比值是根据父元素的字体大小计算的。例如：

```css
p { font-size: 16px; }
p em { font-size: 120%; }
```

### 字体大小和继承

`font-size` 属性是可继承的，但继承的是计算值而不是百分比值。例如：

```css
p { font-size: 12px; }
p em { font-size: 120%; }
p em strong { font-size: 135%; }
```

### 字体风格（font-style）

`font-style` 属性用于选择字体的风格，包括 `normal`、`italic` 和 `oblique`。例如：

```css
font-style: italic;
font-style: oblique;
```

### 字体变形（font-variant）

`font-variant` 属性用于选择常见的字体变形，包括 `normal` 和 `small-caps`。例如：

```css
font-variant: small-caps;
```

### 综合字体属性（font）

`font` 属性是一个简写属性，可以同时设置多个字体相关属性。例如：

```css
h1 { font: italic 900 small-caps 30px Verdana, sans-serif; }
```

使用 `font` 属性时，必须包含 `font-family` 和 `font-size` 属性，且 `font-family` 必须放在最后。例如：

```css
p { font: 200% sans-serif; }
```

### 增加行高

可以在 `font` 属性中设置 `line-height`，用斜线分隔。例如：

```css
p { font: 200%/1.2 sans-serif; }
```

### 使用系统字体

`font` 属性还支持使用系统字体，这可以使 Web 页面看起来更像用户操作系统的原生应用。例如：

```css
body { font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
```

### 自定义字体（@font-face）

`@font-face` 规则允许开发者在网页中使用自定义字体，从而减少对用户计算机上字体的依赖。例如：

```css
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
}
```

通过 `@font-face`，可以确保网页在不同设备和浏览器上具有一致的外观。