为什么粗体单面在 Windows 上垂直移动？答案

【问题标题】：Why does bold monoface shift vertically on Windows?为什么粗体单面在 Windows 上垂直移动？
【发布时间】：2010-03-12 11:24:11
【问题描述】：

在 Windows 上的 Firefox 3.6、IE7 和 Opera 10 中，此 HTML 有一个奇怪的行为：

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

中间的粗体跨度向下移动了一个像素。其他字体不会发生这种情况。

这是为什么呢？我该如何解决？

【问题讨论】：

标签： html css layout bold monospace

【解决方案1】：

这是为什么呢？

很好的问题。只是花了半个小时试图找出原因，无济于事。 Marcgg 的解决方案似乎也不起作用，偏移量仍然存在。谷歌一无所获。这似乎只发生在 Windows 上，不仅在您提到的浏览器中，而且在 Opera 9 和 IE6 中。不是在 Firefox 2.0 中。令人费解。

我该如何解决？

到目前为止，唯一对我有用的解决方案是：

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

即，指定 Courier 而不是等宽。这在我测试的所有浏览器（Windows 2000 下的 IE6、Opera 9、FF 2.0；Ubuntu 下的 Opera 10、FF 3 和 Konqueror）中始终呈现。至于为什么，我还是不知道。

【讨论】：

对于“等宽粗体”，span.offsetTop 为 9，而其他跨度的 offsetTop == 8。奇数。
有没有办法找出浏览器使用的等宽字体？
好的，找到了。问题是“新快递”。我的猜测是，对于粗体变体，基线的偏移量不同。
@Aaron：有趣的问题。谷歌搜索得到了这些统计数据：codestyle.org/css/font-family/sampler-Monospace.shtml不知道他们从哪里得到的，也不知道他们是否可以信任。
@Aaron：很棒的发现。我正在从我的回答中删除“Courier New”。

【解决方案2】：

这只是一种光学效果。抓取屏幕截图并放大：您会看到文本基线根本没有变化。

如果您选择不同的颜色对比，它应该会自行修复。

更新

alt text http://img690.imageshack.us/img690/421/opticaleffect.png

【讨论】：

我认为发生这种变化是因为粗体变体的基线比普通字体的基线高一个像素。我现在的问题是整行的边界框比其他行的边界框大一个像素。
我想你没有测试我的建议，所以我附上截图。在新窗口中打开图像； StackOverflow 似乎可以调整图片大小。
在我的屏幕上，基线正确对齐，但中间文本的绿色背景向下移动了一个像素。那是哪个版本的Windows？哪个浏览器？哪种字体？
Windows XP SP3、Firefox 3.6、Courier New

【解决方案3】：

问题是字体“Courier New”，这是我在大多数 Windows 浏览器中使用“等宽”时使用的默认字体。对于粗体变体，基线位于不同的偏移量：

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

使用此代码，您可以看到中间文本上移（= 不同的基线偏移），但背景颜色现在正确对齐。

解决方案是请求“Courier”作为字体并避免“Courier New”。

【讨论】：