6

前言:最初我只记住 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% 肯定是这样。可能有人做出更好的猜测并给出更明确的答案,就像对孩子的解释一样:)?

4

2 回答 2

2

您使用相同字体遇到不同结果的原因似乎是因为您实际上并没有使用相同的字体。sans-serif 确实是一个变量,不同的浏览器对 sans-serif 使用不同的字体。如果您将其更改为 Arial,则在所有浏览器中都应该相同。

请参阅这篇文章:CSS:Helvetica 是 Mac 上的默认“无衬线”字体,而 Arial 是 Windows 上的默认无衬线字体吗?

于 2012-11-30T23:44:02.567 回答
2

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

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

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

更多信息:字体:糟糕的垂直度量会导致跨浏览器的行高呈现不一致。解决方案?

于 2016-07-05T16:27:08.733 回答