粗体文本行高高于正常文本行高

Question

一定是我遗漏了一些基本的东西。我认为font-weight:加粗不应该改变文本所占的垂直空间。特别是当行高设置为高于字体大小时。

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

在我的OSX chrome上，这三个文本高度不匹配。第二个字体粗细:加粗的字体比其他字体大1px。第三个div只是修复问题的一个例子(不好)

我尝试在这里将行高设置为某个特定的值(18px)，以获得“垂直节奏”

我的问题是，如何才能使粗体和普通文本与示例中的行高相同？

编辑:这是我在mac上看到的

​

同样，这里是“垂直节奏”：http://www.alistapart.com/articles/settingtypeontheweb -基线网格在示例中更明显：http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

Answer 1

这完全取决于您使用的字体。有关OSX或Chrome文本渲染的任何内容都不能确保两种不同的字体( Helvetica-neue和Helvetica-neue-bold是两种不同的字体)即使在相同的字体大小和行高下也具有相同的垂直空间。

即使这要求太高，你可能会认为来自同一系列的两种不同字体可能是一致的，而且通常是一致的，但不幸的是，你选择的两种字体并非如此。

Answer 2

有时添加顶部垂直对齐可以解决这个问题(取决于字体大小/系列)。

strong { vertical-align: top; }

在您的小提琴示例中，因为您已经在容器(div)上设置了行高，所以可以简单地添加以下内容：

span { line-height: 1em; }

Answer 3

在容器和粗体文本上设置绝对行高，或者将粗体文本的行高设置为1em (正如DaveC上面所说的)都可以解决这个问题，例如，从jsfiddle中，您只需添加line-height: 1em

.bolded span {
  font-weight:bold;
  line-height: 1em;
}

或者为什么不遵循HTML标准，使用正确的标记而不是粗体跨度？例如。

strong, em { line-height: 1em }