行高是否由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字体的影响。

由于OSX上的Firefox和Chrome都使我的示例相同，我想知道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)顶部：

  

此部分正在重写。如果您想要漂亮的图片，请参阅[CSS21]的10.8节，了解规范性CSS定义或2002年工作草案。 （但忽略旧文本，其中一半是错误的。我们没有指定哪一半，这是有待确定的。）

那是从上个月开始的。所以，基本上，你知道，祝你好运和Godspeed。

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

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