`font-size` 属性用来指定文本的字体大小。

在 CSS 中，`font-size` 属性用来指定文本的字体大小。这个属性可以用多种单位来定义字体的大小，最常用的是像素 (`px`)，百分比 (`%`)，和 `em` 单位。

 

### 像素 (`px`)

像素是屏幕上最小的点，它们直接影响元素的显示大小。例如，设置 `font-size: 16px;` 会将文本的字体大小设置为 16 像素高。

 

### 百分比 (`%`)

百分比字体大小是相对于父元素的字体大小来计算的。如果设置 `font-size: 100%;`，那么文本的字体大小将与父元素的字体大小相同。

 

### 相对单位 (`em`)

`em` 是一个相对单位，它的尺寸是相对于当前元素的字体尺寸。例如，如果一个元素的 `font-size` 设置为 `2em`，那么这个元素中的文本的字体大小就是父元素字体大小的两倍。

 

### 使用 `em` 和 `px` 的优点

- **灵活性**: 使用 `em` 可以使字体大小相对父元素进行调整，这在响应式设计中非常有用。

- **可读性**: 对于设计师来说，`px` 通常更容易理解和预测字体的大小。

 

### 示例

```css

/* 设置段落的字体大小为 16px */

p {

  font-size: 16px;

}

 

/* 设置段落的字体大小为父元素字体大小的两倍 */

p {

  font-size: 2em;

}

 

/* 设置段落的字体大小为当前视口宽度的10% */

p {

  font-size: 10vw;

}

```

 

### 响应式字体大小

为了实现响应式字体大小，可以使用媒体查询 (Media Queries) 来改变不同屏幕尺寸下的字体大小。

 

```css

/* 基础字体大小 */

body {

  font-size: 16px;

}

 

/* 在屏幕宽度小于或等于 600px 时，将字体大小设置为 14px */

@media (max-width: 600px) {

  body {

    font-size: 14px;

  }

}

 

/* 在屏幕宽度大于 600px 时，将字体大小设置为 18px */

@media (min-width: 601px) {

  body {

    font-size: 18px;

  }

}

```

 

在上述代码中，基础字体大小为 16px。当屏幕宽度小于或等于 600px 时，字体大小调整为 14px。当屏幕宽度大于 600px 时，字体大小调整为 18px。这样可以确保文本在不同设备上的可读性。

 

### 注意事项

- 在使用 `em` 时，需要注意嵌套元素可能会导致字体大小不断增加或减少，这可能导致难以预测的结果。

- 使用 `vw`（viewport width）或 `vh`（viewport height）单位可以使字体大小相对于视口大小进行调整，这在创建全屏布局时特别有用。

 

### 最佳实践

- 对于响应式设计，建议使用 `em` 或 `rem` 单位，因为它们可以更好地处理不同屏幕尺寸和分辨率下的字体大小。

- 为不同类型的文本或元素指定不同的 `font-size`，以确保网页的可读性和清晰度。

- 当使用 `em` 或 `rem` 单位时，应谨慎处理字体大小的继承和累积效果，以避免不期望的结果。