使用CSSline-height属性提高可读性

在本文中，您将了解 CSS line-height 属性以及如何使用它来创建视觉上令人愉悦、可读的文本。

您之前可能已经看到 line-height 被使用过：

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

但它是如何工作的，它在 CSS 中起什么作用？

CSS中的排版根

CSS 中的许多想法都来自排版的学科。一个例子是 CSS line-height 属性，它设置了环绕文本的两个基线之间的距离。

“基线”是文本所在的假想线。

例如，如果我们在 <div> 标记内有这个简短的文本片段：

<div>
  The alligator went for a swim in the deep lagoon.
</div>

如果您拖动浏览器窗口使文本换行到下一行，您将有两个基线和一个行高（用黄色箭头表示）：

CSS line-height 属性的较大值会扩大这个距离，较小的值会缩小它。

行高和文本可读性

line-height 属性在使文本对用户可读方面起着核心作用。当您缩小 line-height 时，它会感到拥挤。长时间阅读这样的文本会让用户感到筋疲力尽：

如果它太大，用户将难以参与他们正在阅读的内容：

但是当你找到合适的line-height，你的文字会感觉宽敞和谐💮🌺🌸

找到合适的 line-height 会根据您的需求而有所不同，但它也取决于您使用的字体系列。这是因为每种字体都有自己的个性，并且会“阅读”在大量文本中有所不同。

例如，Helvetica 和 Times New Roman 将需要不同的 line-height 间距，即使它们都具有相同的 font-size。

行高的语法

您可以为 line-height 提供各种值！它也与其他 CSS 属性完全不同，因为它可以接受典型的 px 和 % 值，但它也有自己独特的“无单位”值：

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/* <length> values like px, rem, em, pt */
line-height: 3em;

/* <percentage> values */
line-height: 120%;

line-height 用黄色箭头表示。

浏览器如何计算行高

如果您使用百分比或“无单位”值，则字体大小将被计入生成的 line-height。例如，下面的两个片段都会被浏览器计算为 19.2px：

.myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

但是，如果您使用 px|em|rem|pt 之类的“长度”值，则 font-size 将不会用于计算 line-height：

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

虽然百分比和“无单位”值似乎相同，但存在细微差别。最佳实践建议尽可能使用“无单位”值 [1]

结论

一般来说，对于大多数字体来说，好的 line-height 范围在 1.5 到 1.7 之间。例如，Alligator.io 使用 1.6 的行高。它更像是艺术而不是科学，很多时候你会发现自己打开浏览器的“开发者工具”来轻推 line-height 直到感觉“恰到好处”✨👌

要了解更多信息，请访问 MDN 以获取有关 line-height 的文档。