WebKit与Mozilla在框中垂直对齐字体字形
Mar*_*ten 14 html css webkit mozilla vertical-alignment
这个测试图像显示了Safari与Firefox(Safari 5.0.5和适用于Mac OS X 10.6.7的Firefox 5.0.1)在文本框内放置文本的方式截然不同.注意"S" sans-serif是如何在Firefox中而不是Safari的顶部.差异似乎取决于使用的字体,其中一些甚至一致地呈现.
我读过的人说,这是因为四舍五入之间的问题font-size,并line-height(通过设置比大小更小的高度固定的),但我认为这我的例子在Firefox无衬线/黑体总是顶部对齐在框中反驳.
对我而言,Safari看起来比Firefox更正确,即文本通常更多地围绕中间线.
有没有一种方法可以让它们更加一致？我的目标只是符合标准的浏览器.
我的测试代码: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>
不幸的是，这个问题没有解决方案。几乎每个浏览器中的文本呈现方式都不同，甚至在主要浏览器版本之间有时也会发生变化。在某些浏览器中，它是由操作系统的特定字体渲染系统和设置决定的。一种字体渲染类型与另一种字体渲染类型之间一直存在并且永远都会存在权衡，并且每一种字体渲染都会随着不同类型硬件上不同类型的显示而变化。
抱歉，您将不得不忍受浏览器之间的非像素完美字体，直到单一浏览器、单一操作系统（没有可用的显示设置选项）、单一显示器类型和尺寸以及单一显卡完全垄断。换句话说，只要您的网站支持多种设备、浏览器、显示器等，它就永远不会完美匹配像素。
（不过，感谢您先做自己的作业和测试。您的问题在提出之前经过了充分的研究和思考。我希望在完成所有工作后我们能够给您一个更好的答案。）
| 归档时间： |
|
| 查看次数： |
1276 次 |
| 最近记录： |