粗体文本行高度高于普通文本行高

Question

必须是我在这里缺少的基本东西。我认为font-weight：bold不应该改变文本占用的垂直空间。特别是当行高设置为高于font-size时。

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

在我的OSX chrome上，这三个文字高度不匹配。第二个使用font-weight：bold比其余的高1px。第三个div只是解决问题的一个例子（很差）

我正在尝试将行高设置为特定的（18px），以获得“垂直节奏”

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

[编辑：] 这是我在Mac上看到的内容

此外，这是我对“垂直节奏”的看法：http://www.alistapart.com/articles/settingtypeontheweb   - 示例中的基线网格更加明显：http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

Answer 1

有时添加顶部垂直对齐将解决此问题（取决于字体大小/系列）。

strong { vertical-align: top; }

在你的小提琴例子中，因为你在容器（div）上设置了行高，你可以简单地添加以下内容：

span { line-height: 1em; }

Answer 2

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

即使这个问题太多了，你可能会认为来自同一家族的两种不同字体可能是一致的，而且通常它们都是一致的，但遗憾的是你所选择的两种字体并非如此。

Answer 3

我遇到了与Chivo字体非常类似的问题：http://www.fontsquirrel.com/fonts/chivo。现在我正在使用最丑的黑客（适用于当前的Firefox和Chrome，尚未经过测试的IE）：

strong { vertical-align: top; position: relative; top: -1px; }

我试着不要像你看到的那样彻底放弃Chivo ......

Answer 4

在容器和粗体文本上设置绝对行高，或者给粗体文本设置1em的行高（如DaveC所说），两者都解决了这个问题，例如：从jsfiddle你只需要添加line-height: 1em

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

或者为什么不遵循HTML标准并使用正确的标签而不是粗体跨度？ E.g。

strong, em { line-height: 1em }

Answer 5

我认为这是一个字体问题。我发现Nunito（Google Web Font）的斜体变体的行高不同。当我切换到名为“Nunito Sans”的字体的返工版本时，问题就解决了。