为什么粗体单色在 Windows 上垂直移动？

发布于 2024-08-25 01:57:59 字数 455 浏览 13 评论 0原文

在 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>

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

这是为什么？我该如何修复它？

原文

In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:

<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>

The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.

Why is that? How can I fix it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与往事干杯 2024-09-01 01:57:59

这是为什么？

很好的问题。花了半个小时试图找出原因，但无济于事。 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）中呈现一致。至于为什么，我还是不知道。

Why is that?

Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.

How can I fix it?

The only solution that has worked so far for me is this:

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

I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.

回复收藏 0 原文

美男兮 2024-09-01 01:57:59

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

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

更新

替代文本 http://img690.imageshack.us/img690/421/opticaleffect.png

回复收藏 0 原文

清泪尽 2024-09-01 01:57:59

问题是字体“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”。

The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:

<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>

With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.

The solution is to request "Courier" as a font and to avoid "Courier New".

回复收藏 0 原文

~没有更多了~