CSS如何设置字体样式

# CSS如何设置字体样式

在网页设计中，字体样式的设置直接影响页面的可读性和视觉体验。CSS（层叠样式表）提供了丰富的属性来控制字体样式，本文将详细介绍常用的字体样式设置方法。

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

`font-family`属性用于定义文本的字体。可以指定多个字体作为备选，浏览器会优先使用第一个可用的字体。

```css
p {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

说明： - 字体名称包含空格或特殊字符时需加引号 - 最后通常指定通用字体族（如sans-serif、serif等）

2. 设置字体大小（font-size）

控制文字尺寸的常用属性：

h1 {
  font-size: 24px;  /* 固定像素值 */
}

body {
  font-size: 16px;  /* 基准大小 */
}

.small {
  font-size: 0.875em;  /* 相对父元素大小 */
}

.large {
  font-size: 1.5rem; /* 相对根元素(html)大小 */
}

推荐：响应式设计建议使用rem或em单位

3. 设置字体粗细（font-weight）

控制文字粗细程度：

.bold {
  font-weight: 700;  /* 等同于bold */
}

.light {
  font-weight: 300;
}

.normal {
  font-weight: normal;  /* 400 */
}

4. 设置字体样式（font-style）

控制斜体显示：

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

.normal {
  font-style: normal;
}

5. 设置行高（line-height）

影响文本行间距的重要属性：

p {
  line-height: 1.6;  /* 无单位值，表示字体大小的倍数 */
}

article {
  line-height: 24px;  /* 固定值 */
}

6. 字体颜色（color）

设置文本颜色：

.text-red {
  color: #ff0000;
}

.text-blue {
  color: rgb(0, 0, 255);
}

.text-theme {
  color: var(--primary-color);  /* 使用CSS变量 */
}

7. 文本装饰（text-decoration）

控制下划线等装饰效果：

a {
  text-decoration: none;  /* 去除链接下划线 */
}

.underline {
  text-decoration: underline wavy red;  /* 波浪下划线 */
}

8. 字体简写属性（font）

组合多个字体属性：

.heading {
  font: italic 700 24px/1.2 "Microsoft YaHei", sans-serif;
}

顺序：font-style → font-weight → font-size/line-height → font-family

最佳实践建议

1. 优先使用系统默认字体保证加载速度
2. 网页正文通常16px起，行高建议1.5-1.8倍
3. 使用CSS变量管理主题字体样式
4. 移动端考虑使用-webkit-text-size-adjust防止自动缩放

通过合理组合这些属性，可以创建出既美观又易读的网页排版效果。 “`

注：本文约650字，涵盖了CSS字体样式的主要设置方法，采用Markdown格式，包含代码示例和实用建议。可根据需要调整具体内容或添加更多示例。