css - 为什么 Firefox 对待 Helvetica 的方式与 Chrome 不同？

Question

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

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

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

我在这里做了一些假设:

• 在标准框模型中，存在用于字体呈现和字形大小和定位的标准，但在它们如何交互方面可能未指定。

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

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

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

因此，我的具体问题是:这个分歧发生在过程中的什么地方，是什么导致它发生的？

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

Answer 1

不幸的是，关于基于字体的内容区域渲染，CSS2.1 does not say much at all :

The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

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

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

请注意，auto 不是 line-height 的有效值；您可能打算使用 normal，顺便说一句，这也是它的初始值(但不一定是浏览器默认值)。此外，规范对 normal 的值是这样说的:

normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.

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

顺便说一下，Chrome 不会剪辑下行部分。它确实将它们呈现在内容框之外，但它永远不会将它们裁剪到框的边界，除非您设置 overflow: hidden。

---

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