# 字体设置

URL: https://caijiao.org/css/03-text-font/01-font-family-size
Source: docs/css/03-text-font/01-font-family-size.md
Description: 字体设置是网页美化的基础内容，主要包括字体族、字号、字体样式和字体粗细等属性的使用方法。

CSS 提供了多种属性用于设置网页中文本的字体样式，主要包括以下几个方面：

## 1. 字体族（font-family）

用于设置文本使用的字体，可以指定多个字体作为备选：

```css
p {
  font-family: "Helvetica", "Arial", sans-serif;
}
````

> 建议最后使用通用字体族（如 `sans-serif`、`serif`、`monospace`）作为兜底方案。

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

用于设置文字的大小，单位可为 `px`、`em`、`rem`、`%` 等：

```css
h1 {
  font-size: 24px;
}
```

## 3. 字体样式（font-style）

用于设置字体是否倾斜，常用于强调文本：

```css
em {
  font-style: italic;
}
```

可选值：`normal`（默认）、`italic`、`oblique`

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

控制文字的粗细程度：

```css
strong {
  font-weight: bold;
}
```

常用值：`normal`、`bold`、`100~900`（数值越大越粗）

## 5. 综合设置（font）

可以用 `font` 属性一次性设置字体样式，例如：

```css
p {
  font: italic bold 16px/1.5 "Arial", sans-serif;
}
```

> 语法顺序固定：*font-style → font-weight → font-size/line-height → font-family*

正确使用字体设置不仅提升视觉效果，还能改善阅读体验与页面专业感。