行高是由 CSS 字体堆栈中的第一个字体决定的吗？

Question

我问这个是因为当我尝试为多语言内容（例如英文和中文）创建 CSS 字体堆栈时，最终渲染会受到堆栈中第一个字体（通常是拉丁字体）的影响，因为大多数中文字体都支持拉丁文）。

参见 this Codepen，例如。

div.a p {
    overflow: hidden;
}

p {
    background-color: red;
    border: 1px solid black;
    display: inline-block;
}

.chinese-only {
    font-family: "Hiragino Sans GB", sans-serif;
    font-size: 24px;
    line-height: 48px;
}

.english-chinese {
    font-family: "Avenir Next", "Hiragino Sans GB", sans-serif;
    font-size: 24px;
    line-height: 48px;
}

.chinese-english {
    font-family: "Hiragino Sans GB", "Avenir Next", sans-serif;
    font-size: 24px;
    line-height: 48px;
}

我所看到的：

由于中文字形只出现在Hiragino Sans GB，我希望所有中文块都使用相同的行高。但是它们显然受到了在堆栈顶部添加 Avenir Next 字体的影响。

由于 Firefox 和 Chrome 在 OSX 上呈现的示例相同，我想知道 CSS 规范是否提到了这方面的任何内容。 CSS 2.1 fonts spec 似乎没有说明当您回退到丢失的字形时如何处理行高。

更新：Safari 确实呈现不同，但不幸的是，差异是由于 overflow: hidden，而不是字形回退。我的 updated example 可能会更清楚一点。

在 Chrome 和 Firefox

在 Safari 上

如果您真的很头疼与字体相关的问题，请尝试 this example 显示不同的字体堆栈，看看它们在每个浏览器上有何不同。

Answer 1

这几乎要归结为用户代理。任何时候 CSS 规范说，“未由该规范定义”，这就是“我们会让浏览器做他们认为最好的事情，然后在几年后尝试让它们保持一致的行为”的代码它不同。

此外，最新的 CSS 内联布局模块在 Section 1 (Line Heights and Baseline Alignment) 的顶部指出：

This section is being rewritten. Refer to section 10.8 of [CSS21] for the normative CSS definition or the 2002 Working Draft if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)

那是上个月的。所以，基本上，祝你好运和 Godspeed。

有趣的是，我在 Safari 6.2.2 中看到的结果与您发布的结果不同：

如果该版本与最新的 Safari 之间存在差异，您或许可以找到两个版本之间的错误修正，解释其更改的原因。

行高是由 CSS 字体堆栈中的第一个字体决定的吗？

Is line height determined by the first font in a CSS font stack?

css

fonts