WebKit 与 Mozilla 框中字体字形的垂直对齐

发布于 2024-11-23 23:29:13 字数 1892 浏览 1 评论 0原文

Glyphs in Box

此测试图像显示了 Safari 与 Firefox（Safari 5.0.5 和 Firefox 5.0）在框中文本的位置有多么不同.1 适用于 Mac OS X 10.6.7)。请注意，在 Firefox（而不是 Safari）中，sans-serif 的“S”是如何连接到框的顶部的。差异似乎取决于所使用的字体，有些甚至是一致呈现的。

我读过人们说是因为 font-size 和 line-height 之间的舍入问题（并通过设置比大小更小的高度来修复），但我认为我的示例反驳了这一点，其中 Firefox 中的 sans-serif/helvetica 始终与框中的顶部对齐。

在我看来，Safari 比 Firefox 更正确，即文本通常更围绕中线。

有没有什么好的方法可以让它们更加一致？我的目标只是符合标准的浏览器。

NB1：这与vertical-align无关。
NB2：我过去调查过类似问题，但没有完全令人满意结果。

我的测试代码： http://jsbin.com/omaboc

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            body {
              font-size: 50px;
              line-height: 1em;
            }
            div {
            background: #b5e260;
                margin-bottom: 5px;
              }
        </style>
    </head>
    <body>
        <div style="font-family: sans-serif">Some text @ this box</div>
        <div style="font-family: serif">Some text @ this box</div>
        <div style="font-family: arial">Some text @ this box</div>
        <div style="font-family: helvetica">Some text @ this box</div>
        <div style="font-family: courier">Some text @ this box</div>
        <div style="font-family: georgia">Some text @ this box</div>
    </body>
</html>

原文

Glyphs in Box

This test image shows how wildly different Safari positions text inside a box vs Firefox (Safari 5.0.5 and Firefox 5.0.1 for Mac OS X 10.6.7). Notice how the "S" for sans-serif is butted up to the top of the box in Firefox and not Safari. The difference seem to vary depending on typeface used, where some are even consistently rendered.

I've read people saying that this is because of rounding issues between font-size and line-height (and fixed by setting smaller height than size), but I think that's disproved by my example where sans-serif/helvetica in Firefox always aligns top in the box.

To me it looks like Safari gets it more right than Firefox, i.e. text is generally more around a middle line.

Is there a good way to get them more consistent? My target is only standards-compliant browsers.

NB1: This has nothing to do with vertical-align.
NB2: I investigated a similar problem in the past with no completely satisfactory outcome.

My test code: http://jsbin.com/omaboc

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            body {
              font-size: 50px;
              line-height: 1em;
            }
            div {
            background: #b5e260;
                margin-bottom: 5px;
              }
        </style>
    </head>
    <body>
        <div style="font-family: sans-serif">Some text @ this box</div>
        <div style="font-family: serif">Some text @ this box</div>
        <div style="font-family: arial">Some text @ this box</div>
        <div style="font-family: helvetica">Some text @ this box</div>
        <div style="font-family: courier">Some text @ this box</div>
        <div style="font-family: georgia">Some text @ this box</div>
    </body>
</html>

分享到QQ

分享到微博

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

发布评论

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

木格 2024-11-30 23:29:13

不幸的是，这个问题没有解决方案。几乎每个浏览器中的文本呈现方式都不同，甚至在主要浏览器版本之间有时也会发生变化。在某些浏览器中，它是由操作系统的特定字体渲染系统和设置决定的。一种字体渲染类型与另一种字体渲染类型之间一直存在并且永远都会存在权衡，并且每一种字体渲染都会随着不同类型硬件上不同类型的显示而变化。

抱歉，您将不得不忍受浏览器之间的非像素完美字体，直到单一浏览器、单一操作系统（没有可用的显示设置选项）、单一显示器类型和尺寸以及单一显卡完全垄断。换句话说，只要您的网站支持多个设备、浏览器、显示器等，它就永远不会完美地匹配像素

。（感谢您先做了自己的作业和测试。您的问题在提出之前经过了充分的研究和思考。我希望经过所有这些工作后，我们本可以给您一个更好的答案。）

回复收藏 0 原文