WebKit与Mozilla框中的字形的垂直对齐 [英] WebKit vs Mozilla vertical alignment of font glyphs in box
问题描述
此测试图像显示了Safari相对于Firefox(Safari 5.0.5和Firefox 5.0.1(适用于Mac OS X 10.6.7)的Safari)在文本框内放置文本的方式有多么大的不同.请注意，sans-serif的"S"如何在Firefox(而不是Safari)中紧靠框的顶部.差别似乎取决于所使用的字体，有些甚至可以一致地呈现.
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.
我已阅读人们在说这是因为font-size和line-height之间的舍入问题(并通过将高度设置为小于大小来固定)，但是我认为在我的示例中，Firefox中的sans-serif/helvetica总是在框顶部对齐，这一点得到了证明.
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.
对我来说，Safari似乎比Firefox更加正确，也就是说，文本通常位于中间一行.
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:与
vertical-align无关. - NB2:我调查了过去存在类似问题，没有完全令人满意的结果.
- NB1: This has nothing to do with
vertical-align. - NB2: I investigated a similar problem in the past with no completely satisfactory outcome.
我的测试代码: 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>
推荐答案
不幸的是，没有解决此问题的方法.几乎在所有浏览器中，文本渲染都是不同的，甚至在主要浏览器版本之间，文本渲染有时也会改变.在某些浏览器中，取决于特定的字体渲染系统和操作系统中的设置.从一种类型的字体渲染到另一种类型的字体总是存在并且永远都会有一个权衡，而每种字体都会随着在不同类型的硬件上的不同类型的显示器而改变.
Unfortunetly, there isn't a solution to this problem. Text rendering is done differently in almost every browser, and even between major browser versions it sometimes changes. In some browsers it is determined by the particular font rendering systems and settings from the OS. There have always been and always will be trade offs for one type of font rendering to another, and every one of those will change with different types of displays on different types of hardware.
对不起，您必须在浏览器之间使用非像素完美字体，直到单个浏览器，没有可用显示设置选项的单个操作系统，单个显示器类型和大小以及单个显示器完全垄断为止.显卡.换句话说，只要您的网站支持多种设备，浏览器，显示器等，它就永远无法完美匹配像素.
Sorry, you'll have to live with non-pixel perfect fonts between browsers until there is a complete monopoly by a single browser, a single OS with no available display setting choices, a single monitor type and size, and a single video card. In other words, it's never going to match pixels perfectly as long as your site supports multiple devices, browsers, displays, etc.
(首先要做功课和测试的荣誉.在问完问题之前，对您的问题进行了认真的研究和思考.我希望我们在完成所有工作后能给您一个更好的答案.)
(Kudos for doing your own homework and testing first though. Your question was well researched and thought before asking. I wish we could have given you a better answer after all that work.)
这篇关于WebKit与Mozilla框中的字形的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
