14

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

浏览器之间不同垂直字符位置的演示

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

现在,我对如何解决这个特定的差异并不直接感兴趣。我意识到有一些手动调整的重置样式表试图消除或掩盖差异,但我特别感兴趣的是导致这些浏览器首先呈现不同的因素。

我在这里做一些假设:

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

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

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

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

因此,我的具体问题是:这种分歧发生在过程中的什么地方,什么原因造成的?

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

4

2 回答 2

4

Unfortunately, re: rendering of the content area based on the font, 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.)

In other words, typesetting, and how exactly to draw and position the content area of a line box, is left up to the browser's own implementation, at least in CSS2.1. This may however be better defined in a future specification (likely the Fonts module, if not a separate module1).

Section 10.8.1 contains some details on how the line-height property affects the rendering of the content area around text that flows inline, but again it depends on the height of the content area itself, which as stated above is undefined in CSS2.1.

Note that auto is not a valid value for line-height; you probably meant to use normal, which incidentally is also its initial value (but not necessarily the browser default). Also, this is what the spec says about the value 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'.

As you can see, there's not much to go on, even with regards to comparing line-height: normal and line-height: 1 (or 1em or 100%), because what constitutes a "normal" line height is up to the browser to decide as well. However, it looks like Chrome and Firefox do a good job of keeping glyphs within reasonable boundaries when asked to use a normal line height.

By the way, Chrome does not clip the descenders. It does render them outside of the content box, but it should never clip them to the bounds of the box unless you set overflow: hidden.


1 A CSS3 definition of the line-height property currently resides in this module, but it's immediately obvious that it's been long abandoned, or at least pending a rewrite. The module in its current state is extremely detailed, but suffice it to say that it's been largely ignored by both browser vendors and the working group.

于 2013-02-01T22:57:14.043 回答
-1
  • '行高是自动的' => 浏览器可以选择。
  • '行高 = 字体大小' => 用户错误:文本将难以辨认,再次对浏览器进行一些调整是合理的,确实是必要的。

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

于 2013-02-01T23:27:40.273 回答