CSS：理解和调整字体的前导/行高

Posted 2023-03-06

【中文标题】CSS：理解和调整字体的前导/行高

【英文标题】：CSS: Understanding and adjusting leading / line-height of fonts

【发布时间】：2013-12-14 16:06:05

【问题描述】：

here 提出了一个非常相似的问题，但答案确实足够......

CSS line-height 属性控制字母上方的空白量。使其更大/更小将文本行更远/更近地排列在一起。但是如果你将行高设置为与字体大小完全相同的值，文本上方仍然会有空白。

所以这不太行......

div  height: 80px; 
span  font-size : 80px; line-height : 80px; 
<div>
<span>Foo</span>
</div>

http://jsfiddle.net/s_d_p/yMHVs/

封闭文本与容器高度的实际匹配程度似乎因字体而异。

所以我的问题分为两部分：

当我们设置 line-height 时，我们实际上在调整什么？

有没有办法完全删除它，使字母精确地放入容器中？

【参考方案1】：

请注意，剩余/额外空间通常是所使用字体的症状，由其设计者指定。

因此，80px 包括上方和/或下方分配的空白区域。通常会在上面提供额外的空白以允许重音字符，否则将需要压缩字母本身 - 产生不一致的字体。

见here & here for further information。

行高是指字体的总高度，包括任何分配的空白。

【讨论】：

谢谢。一个跟进。设计师设置的任意数量的空白如何与 font-size 属性交互？ font-size :16px 是否意味着整个字符 + 空白将是 16px 高？所以实际的字形总是那个高度减去空白？

是的，字体大小总是包含任何分配的空白

【参考方案2】：

我确信空间是为一些需要更多空间的字符保留的。喜欢这个：

Fj╛

字符“j”需要比“F”更多的空间，我再次确定还有其他字符（如“╛”）需要在上方和底部留出一些空间。所以字体设计师为那些字符保留了这个空间。

jsFiddle