在IE,Safari和Chrome中,css行高渲染方式不同

Question

预言:最初我只记得Windows,但经过一段时间的Mac Air测试后,意识到它更糟糕.虽然在实际代码中它并不是那么麻烦,尽管存在一些不一致.

这是测试 http://jsbin.com/ehegaj/6/edit

简而言之,发生了什么.我有应用line-height属性的标题,这总是一行标题所以我锁定高度只是为了适合字体.在不同的浏览器(和操作系统)中,您可以看到文本的区别不同.有什么想法如何解决？

UPD:这里http://jsbin.com/uzucuf/1/edit是我做的实际工作的非常接近的例子,再次它不像上面的样本测试那么糟糕,但仍然有移动像素.

UPD2:

是否有更多的测试主要集中在Windows 7上,并且测试屏幕截图包含在不同浏览器中的图像,具有不同的线高.你可以看到它们之间的视觉上的不一致.

http://imageshack.us/a/img845/6734/testheaders.png

它大概是1px,所以实际上我可以通过使用线高度29px并为IE提供不同的线高度30px来修复它.虽然我只是留下30px的线高并忽略了safari,所以在这一点上我很好.

所以只是好奇为什么会这样？迫切需要花费几个小时浏览不同的资源:

这个家伙,看起来有同样的问题,但只是摆脱找到问题的原因.

其他人建议只使用偶数值,line-height在我看来有点奇怪:)请纠正我,如果我在这里做错了.

其他一些但有些不相关的话题只是非常有兴趣阅读.

最后,看起来我找到答案,它有点模糊,但实际上是有道理的.

1.三组行间距值
由于源自TrueType和OpenType字体格式历史的不明原因,每个webfont都带有三组行间距值.

在系统7中引入的"旧Mac"设置.在旧的Mac OS中,如果字形到达"旧Mac"行间距线的上方或下方,则字形将被垂直挤压以适应.

在Windows 3.1中引入的"旧Windows"集,其中在"旧Windows"上升线和下行线上方或下方的轮廓的任何部分都不会出现在屏幕上(因此字形将被裁剪).一个"排版"集,据说没有其他两个集的限制.

但问题是,许多Windows应用程序仍然使用"旧Windows"值.通常这是故意完成的,以防止从使用旧应用程序创建的文档中重排.在Mac OS X上,压缩不会发生,但大多数应用程序仍然使用"旧Mac"值.

这件行李已被带入浏览器.Mac OS X上的Chrome使用的值与Windows上的Chrome不同; Windows 7上的Firefox使用的值与Windows XP上的Firefox不同,Windows 7上的Firefox使用的值与Windows 7上的Chrome不同.相同浏览器的Mac和Windows版本将使用不同的值集,而不同同一操作系统上的浏览器也可能使用不同的值!在理想的世界中,简单的解决方案是让字体代工厂确保所有三组值都能产生相同的结果.但是许多现有字体是在构思webfonts之前创建的,而字体创建工具并不能让类型设计者轻松地使这些值"正确".

简而言之:有许多字体,其中行间距值导致操作系统和浏览器之间的不一致.

但我仍然不是100%肯定的情况.可能是有人做出更好的猜测,并给出更明确的答案,就像孩子的解释:)？

Answer 1

简而言之：有许多字体的行距值会导致操作系统和浏览器之间的不一致。

这是真实的。许多字体的vertical metrics. 这种字体永远不会在浏览器之间正确对齐。使字体在浏览器中呈现一致的唯一方法是修复其垂直度量。

大多数字体提供商允许您在下载字体之前更新和修复字体的垂直规格。不过，他们可能会以不同的方式称呼该选项。例如：Fontsquirrel 称之为Auto-Adjust Vertical Metrics，myFonts.com 称之为Line Height Adjustments。

更多信息：字体：不良的垂直度量会导致跨浏览器的行高渲染不一致。解决方案？