【发布时间】：2012-11-19 05:31:22
【问题描述】：
前言：最初我只记住 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，但在这一点上我很好。
所以只是好奇为什么会这样？这种渴望迫使他们花费几个小时浏览不同的资源：
This guy，看起来有同样的问题，但只是摆脱了寻找问题的原因。
Other person 建议仅对 line-height 使用偶数值，这在我看来有点奇怪：) 如果我在这里做错了，请纠正我。
Some other 但有点无关的话题只是很感兴趣继续阅读。
And finaly，看起来我找到了答案，有点模糊，但实际上有点道理。
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% 确定是这样。可能有人做出更好的猜测并给出更明确的答案，就像给孩子的解释一样:)？
【问题讨论】：
-
奇怪，但我也注意到了这一点。也许您尝试做的事情对于跨浏览器兼容性来说太精确了？您能告诉我们您正在尝试做什么，以便我们可以帮助您为您提供替代解决方案吗？
-
谢谢西蒙，我正在尝试制作一种全局标题，测试代码与实际代码相差甚远，我只是为我需要的东西添加了更多的高度和行高。再一次，它看起来并没有那么糟糕，尤其是在 Mac 中。稍后我会准备更接近的样本
-
我认为您的
h1上的height对您来说是破坏一切的原因。同样，您的问题还不清楚，但看看这里发生了什么：jsbin.com/ehegaj/12/edit -
我这里需要身高，会尽快更新问题的详细信息
-
出于好奇，您是否已将所有全局重置应用到您的样式表？
标签： fonts css cross-browser