文本与字体

用 font-family 选择一种字体，然后调整大小、字重和行距，让文字读起来舒服。

9 分钟 · 3 题

字体是字母的样式设计：Arial、Georgia 或 Times New Roman 都是字体。在 CSS 中，font-family 属性为一段文字选择字体。你给它一个用逗号分隔的字体列表：浏览器先尝试第一个；如果访问者的设备上没有安装它，就换到下一个，依此类推。这就像 A 计划、B 计划、C 计划。

body {
  font-family: Georgia, "Times New Roman", serif;
}

列表里的最后一个词是一个通用字体族：serif 表示带衬线的字体（字母末端的小脚，就像印刷报纸里那样），sans-serif 表示不带衬线的字体（外观更现代，比如 Arial），monospace 表示等宽字体，其中每个字母宽度相同（非常适合代码）。注意 "Times New Roman" 周围的引号：只要字体名称包含空格，就必须加引号。

文字大小用 font-size 设置。你已经认识像素了（16px 是浏览器的默认大小）。还有 rem 单位：1rem 等于页面的基准大小，所以 1.5rem 是该大小的一倍半。字重，也就是字母笔画有多粗，用 font-weight 设置：normal 表示常规文字，bold 表示加粗，或者用 100（非常细）到 900（非常粗）之间的数字，其中 400 相当于 normal，700 相当于 bold。

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

最后一项设置，常被忽视却对阅读舒适度至关重要：line-height，即行高。它控制段落各行之间的垂直空间。太紧，行与行会显得憋闷；太松，视线又会迷失。最佳做法是使用无单位的值，它会以文字大小为基准做乘法：line-height: 1.5; 让每一行的高度是字号的一倍半。

p {
  font-size: 16px;
  line-height: 1.5;
}

知识检测

确认你已牢记本课的重点内容。

1. 为什么要给 font-family 提供多个用逗号分隔的字体？
   • 为了在同一个单词里混用字体
   • 以便某个字体缺失时浏览器尝试下一个
   • 因为 CSS 语法要求至少三个值
2. 哪个 font-weight 值对应经典的加粗（bold）？
   • 100
   • 400
   • 700
   • 900
3. 在 font-size: 20px 和 line-height: 1.5 的情况下，每一行有多高？
   • 20 像素
   • 25 像素
   • 30 像素
   • 35 像素