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

【问题标题】：Bold text line-height is higher than normal text line-height粗体文本行高高于正常文本行高
【发布时间】：2012-01-12 16:34:22
【问题描述】：

必须是我在这里缺少的基本内容。我认为 font-weight:bold 不应该改变文本占用的垂直空间。特别是当 line-height 设置为高于 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

【问题讨论】：

无法在 Windows 上的 Firefox 上重现。理论上字体粗细不应该改变行高。 “垂直节奏”是什么意思？你到底想做什么？设置行高通常不是解决任何问题的最佳解决方案。
您可以尝试使用padding 而不是line-height。您可能还想为没有 OSX 的人添加一张图片。
好的，我已经试着说得更清楚了。我添加了一张显示我所看到的图像和几个解释垂直节奏或基线网格的链接。网格是我在这里尝试做的。这个例子只是我遇到问题的一小部分。
ybakos，让我们不要在这里开始“html/css 不是编程语言”。我确实标记了问题 html 和 css。
Mikko，这似乎是显示字体时的浏览器故障。如果您使用不同的字体大小/行高玩一点，您会发现行为略有不同。尝试例如 font-size:14px 和 line-height:20px。这里没有问题发生。我认为当字体为粗体时浏览器会出现一些数学问题。

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

strong, em { line-height: 1em }

【讨论】：

我不想将行高设置为 1em，因为我希望行高正好是 18px，就像我在问题中所说的那样。如果我有多行粗体字，则对齐将与 1em = 13px 行高字母关闭。示例代码就是这样，示例代码。将代码更改为使用 strong 而不是 span 在这里没有帮助，因为我只是想演示线路问题。
我认为您错过了我的回复的重点。行高正好是 18px。在子元素上使用 1em 意味着继承 18px 的计算高度，而不是应用它们自己的值。不是建议更改 div 的 line-height，而是为粗体内容指定 1em，以便它继承 div 的 line-height。
(更正 - 我没时间编辑我的回复) 在子元素上使用 1em 意味着它们继承了 div 的 18px 行高，而不是应用它们自己的值.我已经在 OS X Chrome 中对此进行了测试，这是一个很好的修复。你不认为问“有没有更好的方法来处理这个问题”然后拒绝某人建议一个有点粗鲁？
这为我修好了，谢谢。就我而言，问题仅在我将粗体的字体粗细设置为 900 时出现。但这无论如何都解决了。
天啊，当我检查这条评论时，我没有像现在这样彻底地测试它，男孩是我错了。对不起，如果可以的话，我现在会投票，但除非你编辑这个答案，否则我不能。对于此事，我不知道为什么将跨度中的行高设置为 1em 不会将跨度中的行高设置为与字体大小相同的大小，而是设置为周围的行高。请原谅我多年前的事。

【解决方案3】：

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

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

如你所见，我尽量不放弃 Chivo ...

【讨论】：

【解决方案4】：

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

strong { vertical-align: top; }

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

span { line-height: 1em; }

【讨论】：

我遇到的问题是，当悬停时一行变为粗体时，
标签集向上移动。添加 vertical-align: top 到 css 修复它。谢谢！

【解决方案5】：

这完全取决于您使用的字体。 OSX 或 Chrome 文本渲染无法确保两种不同的字体（Helvetica-neue 和 Helvetica-neue-bold 是两种不同的字体）即使在相同的字体大小和行高下也具有相同的垂直空间。

尽管问的太多了，但您可能会认为来自同一个系列的两种不同字体可能是一致的，而且通常它们是一致的，但遗憾的是您选择的两种字体并非如此。

【讨论】：

这很奇怪，因为行高是在px 中明确设置的，无论字体的实际大小是多少，它都应该是相同的高度。无论字体大小是1px 还是100px，line-height:18px; 都应该相同。
谢谢 Nate B，我也是这么想的。 18px 就是 18px，对吧？
是的，我希望浏览器/平台之间存在差异，但我仍然觉得奇怪的是，它像这样彼此相邻呈现不同。
考虑两块文本，一小块 (10px) 和一大块 (21px)，但两者的行高相同 (21px)。尽管两种情况下基线之间的间距都是 21px，但两个块的基线并不重合，或者位于同一个网格上。
我相信你确实在乎——我的意思是将行高设置为 18px 并不会使其高 18px（或多个）。你正在尝试做的事情是不可能的