Skip to main content

CSS行间距和样式属性

65 老马 前端 关于CSS的字体间距和字符间距 (六月 2025)

65 老马 前端 关于CSS的字体间距和字符间距 (六月 2025)
Anonim

了解如何使用CSS样式属性line-height来影响网页上的行间距。

CSS行间距的值

CSS行间距受CSS样式属性line-height的影响。此属性最多可使用5个不同的值:

  • 正常: 浏览器确定与字体大小相关的行间距值。这通常与字体大小相同或略大(如20%)。
  • 继承: 行间距应取自父元素的行间距。因此,如果将body标签的行高设置为比字体大小大30%且内部的段落标记设置为继承,则它们的行高也比font-size大30%。
  • 一个号码: 如果行高度值没有度量单位,则将其视为行高的字体大小的乘数。因此,行高1.25将比字体大25%。
  • 长度: 如果行高值具有度量单位,则行之间应存在确切的空间量。因此,1.25mm会产生相距1.25毫米的线。
  • 百分比: 如果行高是百分比,那么这将是字体大小的百分比。因此,125%的行高将比字体大25%。

您应该为CSS行间距使用哪个值

在大多数情况下,行间距的最佳选择是将其保留为默认值或“正常”。这通常是最易读的,不要求你做任何特别的事情。但是改变行间距可以使文本产生不同的感觉。

如果您的字体大小定义为ems或百分比,那么您的行高也应该以这种方式定义。这是最灵活的行间距形式,因为它允许读者调整字体大小并在行间距上保持相同的比例。

使用点(pt)值设置打印样式表的行高。该点是打印度量,因此您的字体大小也应该是点。

我们不喜欢使用数字选择,因为我们发现它对人们来说最容易混淆。许多人认为这个数字是一个绝对的大小,因此它们使它变得巨大。例如,您可能将字体设置为14px,然后将行高设置为14,这会导致行之间存在巨大间隙,因为行间距设置为14 时 字体大小。

您应该为线间距使用多少空间

如上所述,我们建议使用默认行间距,除非您有特定的理由进行更改。更改行间距可能会产生不同的影响:

  • 非常紧密的文本可能难以阅读。但是小行空间会影响文本的情绪。如果文本被拼凑在一起,它可以使文本看起来更暗或更密集。
  • 更远的文本也可能难以阅读。但宽行空间使文本看起来更流畅和流畅。
  • 更改行间距可能会使不适合空间的文本更紧凑或在设计中占用更多空间。