javascript - 总是相同的行高？

Question

有什么解决方案可以使两条线之间的高度始终相同吗？我的意思是字体大小为 14px 和字体大小为 19px 的文本具有相同的距离。在附图中，您可以看到一个示例。

Answer 1

是的，CSS line-height。见MDN。

例如：

.big {
  font-size: 19px;
  line-height: 19px;
}

.small {
  font-size: 14px;
  line-height: 19px;
}

Answer 2

您可以设置line-height为特定值，甚至以像素为单位，例如* { line-height: 21px }，尽管这是非常严格的，并且迟早会导致问题。对于字体大小为 14px 和 19px 的文本，你真的应该使用不同的行高。如果您解释为什么要使用相同的行高，那么原始问题可能会有一个很好的解决方案。

设置行高不会像图像中那样设置一致的间距，它显示了文本基线和下一行大写顶行之间的距离。行高是文本基线之间的距离。行之间的视觉空白空间因字体和字符而异（考虑仅包含诸如 a、x、s 之类的字母的行与包含诸如 Ê、Å、g、Q 之类的大量字符的行）。大写顶行，即没有变音符号的大写字母的最大级别，因字体而异。

Answer 3

保持行高一致的更好解决方案是将 body 标签设置为您想要的高度。**注意，根据经验，您应该只使用 pt 和 em 来调整字体/前导的大小（前导是行高的排版术语）

body{
      font-size: Xem;
      line-height: Yem;
}

然后，当您有某些需要不同前导值的部分时，您可以使用假设使用 CSS 之类的类来设置它们的样式。

.tightStory{
  font-size: Xem;
  line-height: Xem;
}
.looseStory{
  font-size: Xem;
  line-height: Zem;
}

希望这可以帮助