CSS 文字与段落排版详解

字体设置

在网页开发中，我们可以利用 CSS 样式为文字指定字体、字号和颜色。比如将网页默认字体设为宋体：

body {
  font-family: "宋体";
}

这里有个实际经验：尽量避免使用用户本地未安装的冷门字体，否则浏览器会回退到默认字体，导致设计效果不一致。现在主流做法是优先使用系统自带且美观的字体，例如微软雅黑。

body {
  font-family: "Microsoft YaHei";
}

注意，英文字体名通常比中文名兼容性更好，因为部分旧版浏览器对中文名称支持有限。

字号与颜色

控制文字的视觉层级主要靠字号和颜色。下面代码将正文设置为 12 像素，并搭配深灰色（#666）以减轻阅读疲劳：

body {
  font-size: 12px;
  color: #666;
}

字体样式

除了常规文本，我们还能通过 CSS 调整粗体、斜体等样式，而不必依赖 <strong> 或 <em> 标签的默认行为。

粗体示例：

p span {
  font-weight: bold;
}

斜体示例：

p a {
  font-style: italic;
}

配合 HTML 结构如下：

<p>三年级时，我还是一个<a href="#">胆小如鼠</a>的小女孩。</p>

段落修饰

有时需要在视觉上强调文字，下划线是最常见的方式：

p a {
  text-decoration: underline;
}

而在电商场景中，删除线常用于展示原价：

 {
  : line-through;
}