总是相同的线高？

Question

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

Answer 1

Yup，CSS line-height。请参阅MDN。

E.g：

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

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

Answer 2

保持线高一致的更好解决方案是将身体标签设置为所需的高度。 **请注意，作为一条经验法则，您应该只使用pt和em来调整字体/前导的大小（前导是行高的排版术语）

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

然后，如果某些部分需要不同的前导值，您可以使用像CSS这样的类来设置它们的样式。

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

希望这有帮助

Answer 3

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

设置行高不设置图像中的一致间距，它显示文本基线与下一行的大写顶行之间的距离。行高是文本基线之间的距离。线条之间的视觉空白区域因字体和字符而异（想想包含字母的线条，如a，x，s，而不是包含Ê，Å，g，Q等字符的线条）。大写的顶行，即没有变音符号的大写字母的最大级别，因字体而异。