为啥 Firefox 对待 Helvetica 和 Chrome 的方式不同？

Posted 2023-03-06

【中文标题】为啥 Firefox 对待 Helvetica 和 Chrome 的方式不同？

【英文标题】：Why does Firefox treat Helvetica differently from Chrome?为什么 Firefox 对待 Helvetica 和 Chrome 的方式不同？

【发布时间】：2013-01-12 11:09:37

【问题描述】：

在 Helvetica 中呈现的文本的垂直位置及其内容区域的大小在 Firefox 和 Mac 版 Chrome 中有所不同。例如，在 Chrome 中，如果 line-height 与 font-size 相同，则会裁剪下一行。

（我已经调整了这张图片中块元素的位置——保持基线一致——以说明大小和文本位置的差异）。如果你有 Mac，你可以看到我在说什么in this JS Bin。

现在，我对如何解决这个特定的差异并不直接感兴趣。我意识到有hand-tuned reset stylesheets 试图消除或掩盖差异，但我特别感兴趣的是导致这些浏览器首先呈现不同的因素。

我在这里做一些假设：

标准盒子模型中的字体渲染以及字形的大小和位置都有标准，但在它们如何交互方面可能未指定。

浏览器制造商对上述标准的解释中存在错误，这些错误可能会影响文本的大小、位置和呈现方式。

对于这些特定浏览器，大部分设计讨论和实际实现都以某种形式公开。因此，如果知道去哪里寻找，就有可能了解这种差异的来源。

两个浏览器都从同一个地方开始 - 标记、样式和字体定义在它们之间是一致的。在某些时候，他们在如何使用这些来产生最终输出方面存在分歧。

因此，我的具体问题是：在哪里在过程中发生这种分歧，以及是什么导致它发生？

我觉得，有了这些知识，我可以更好地理解如何纠正这些差异。特别是在这种情况下，以及我将来可能遇到的类似情况。

【问题讨论】：

FWIW，在 Windows IE、FF 和 Chrome 中都呈现大致类似于您的 chrome 示例的内容。但是，我倾向于同意在这些问题上依赖一致性是不明智的 - 在较小的字体大小下，差异可能会非常大。

每个浏览器的呈现方式都会略有不同，尤其是在 W3C 尚未标准化的情况下。否则，不确定您要在这里寻找什么。没有灵丹妙药。

另外，你可能想更新你的 FF 版本：你落后了 5 个版本，显然，14+15 版本引入了一些与 mac 相关的字体更改：support.mozilla.org/en-US/questions/937994 听起来不像你的问题，但值得一试。

如果你对这个问题的元讨论感兴趣，it can be found here。

Adam，我在这里根据元讨论和 BoltClock 的一些非常有用的反馈进行了一些编辑。如果我歪曲了您的兴趣，请随时进一步编辑 - 但请尽量保持一个有凝聚力的问题。重新打开，因为我觉得这是一个具体的、建设性的、可回答的问题。

【参考方案1】：

很遗憾，re: 基于字体渲染内容区域，CSS2.1 does not say much at all:

内容区域的高度应该以字体为基础，但是这个规范没有具体说明如何。例如，UA 可以使用 em-box 或字体的最大升序和降序。 （后者将确保部分高于或低于 em-box 的字形仍在内容区域内，但会导致不同字体的不同大小的框；前者将确保作者可以控制相对于“行高”的背景样式，但会导致字形在其内容区域之外绘制。）

换句话说，排版，以及如何准确地绘制和定位行框的内容区域，取决于浏览器自己的实现，至少在 CSS2.1 中是这样。然而，这可能会在未来的规范中得到更好的定义（可能是Fonts module，如果不是单独的模块¹）。

Section 10.8.1 包含一些关于line-height 属性如何影响内联文本周围内容区域呈现的详细信息，但它再次取决于内容区域本身的高度，如上所述，CSS2 中未定义.1.

注意auto 不是line-height 的有效值；您可能打算使用normal，顺便说一下，这也是它的初始值（但不一定是浏览器的默认值）。此外，这就是规范中关于 normal 值的内容：

正常 告诉用户代理根据元素的字体将使用的值设置为“合理”的值。该值的含义与 相同。我们建议使用 1.0 到 1.2 之间的“正常”值。计算值是“正常”。

如您所见，即使比较line-height: normal 和line-height: 1（或1em 或100%），也没什么可做的，因为构成“正常”行高的因素取决于浏览器也可以决定。但是，当要求使用正常的行高时，Chrome 和 Firefox 似乎在将字形保持在合理范围内方面做得很好。

顺便说一下，Chrome 并没有剪辑下行。它确实将它们呈现在内容框之外，但它不应该将它们剪辑到框的边界，除非您设置overflow: hidden。

---

¹_{line-height 属性的 CSS3 定义当前位于 this module 中，但很明显它已被废弃已久，或者至少等待重写。当前状态下的模块非常详细，但足以说明它在很大程度上被浏览器供应商和工作组忽略了。}

【讨论】：

我可以深入了解每个浏览器使用的渲染引擎的来源，但我必须保存以备后用。

再次感谢您进行这项研究。我查看了源代码。看起来 Webkit 有测量字形的能力，但是它在内容区域中放置基线的位置并没有基于任何标准。这个 W3C 邮件列表线程在总结 CSS 中印刷基线的状态方面做得非常出色。据我所知，过去几年没有任何改变：lists.w3.org/Archives/Public/www-style/2012Jan/0381.html

【参考方案2】：

'行高是自动的' => 浏览器可以选择。 '行高 = 字体大小' => 用户错误：文本将难以辨认，再次对浏览器进行一些调整是合理的，确实必不可少。

你必须使用一些前导。例如，书籍可以在 12pt 行距上设置为 10pt。

【讨论】：

这个问题不是关于不同行高值的易读性。这是关于浏览器和管理它们的标准之间的行为差​​异。此外，我认为您可能对 line-height 的工作原理感到困惑：它“specifies the height that is used in the calculation of the line box height”。将其设置为与 font-size 相同的值是admittedly condensed, but not illegible。