粗体文本行高高于正常文本行高 [英] Bold text line-height is higher than normal text line-height

问题描述

必须是基本的东西我在这里失踪。我认为font-weight：bold不应该改变文本需要多少垂直空间。特别是当line-height设置为高于font-size时。

- 基线网格在示例： http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

解决方案

完全取决于您使用的字体。没有任何关于OSX或Chrome文本呈现将确保两个不同的字体（和Helvetica-neue和Helvetica-neue-bold是两种不同的字体）将具有相同的垂直空间，即使在相同的字体大小和行高度。

即使这太过分了，你可能会认为来自同一个家庭的两种不同的字体可能是一致的，通常他们是，但可悲的是，你选择的两种字体不是。

Must be something basic I'm missing here. I thought that font-weight:bold should not change how much vertical space the text takes. Especially when the line-height is set to be higher than the font-size.

http://jsfiddle.net/Arkkimaagi/7xAyy/

On my OSX chrome those three text heights do not match. The second one with font-weight:bold is 1px higher than the rest. The third div is just an example of fixing the problem (poorly)

I'm trying to set the line-height to something specific (18px) here, to have "vertical rhythm"

My question is, how can I have bold and normal text both with same line-height as in the example?

[edit:] here's what I see on my mac

Also, here is what I ment by "vertical rhythm": http://www.alistapart.com/articles/settingtypeontheweb - the baseline grid is more visible in the example: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

解决方案

It completely depends on the fonts you are using. Nothing about OSX or Chrome text rendering would ensure that two different fonts (and Helvetica-neue and Helvetica-neue-bold are two different fonts) would have the same vertical space even at the same font-size and line height.

Even though that is too much to ask you might think that two different fonts from the same family might be consistent, and usually they are, but sadly the two fonts you have chosen are not.

这篇关于粗体文本行高高于正常文本行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！