前言:最初我只记住 Windows,但在 Mac Air 上测试了一段时间后,我意识到那里的情况更糟。尽管在实际代码中它不是那么麻烦,尽管存在一些不一致之处。
这是测试 http://jsbin.com/ehegaj/6/edit
简而言之,发生了什么事。我在应用line-height
属性的地方有标题,这始终是一行标题,所以我锁定了高度只是为了适合字体。在不同的浏览器(和操作系统)中,您可以看到不同的文本布局。有什么想法可以解决吗?
UPD:这里http://jsbin.com/uzucuf/1/edit是我所做的真实工作的非常接近的例子,同样它并不像上面的示例测试那么糟糕,但仍然有移动像素。
UPD2:
做了更多的测试,主要集中在 Windows 7 上,并且包含带有不同行高的不同浏览器的测试屏幕截图的图像。您可以看到它们之间的视觉不一致。
它大约是 1px,所以实际上我可以通过使用 line heeight 29px 并为 IE 提供不同的 line height 30px 来修复它。虽然我只是将其保留为 30px 行高并忽略 safari,所以在这一点上我很好。
所以只是好奇为什么会这样?这种渴望迫使花费几个小时浏览不同的资源:
这家伙,看起来也有同样的问题,但只是摆脱了寻找问题的原因。
其他人建议只使用偶数值,line-height
在我看来这有点奇怪:) 如果我在这里做错了,请纠正我。
其他一些但有点不相关的话题只是很感兴趣继续阅读。
最后,看起来我找到了答案,它有点模糊但实际上是有道理的。
1. 三组行距值
由于根深蒂固的 TrueType 和 OpenType 字体格式的历史原因,每个 webfont 都带有三组行距值。在 System 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% 肯定是这样。可能有人做出更好的猜测并给出更明确的答案,就像对孩子的解释一样:)?