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

Question

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

例如,请参阅此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字体规范似乎没有说明如何处理行高.

更新:Safari确实以不同的方式呈现,但不幸的是,差异是由于overflow: hidden,而不是字形回退.我更新的示例可能会更清楚地显示这一点.

在Chrome和Firefox上

在Safari上

如果您真的遇到与字体相关的麻烦,请尝试显示不同字体堆栈的示例,并了解它们在每个浏览器上的区别.

Answer 1

这很大程度上取决于用户代理。任何时候CSS规范说，\xe2\x80\x9c不是由这个规范定义的\xe2\x80\x9d，\xe2\x80\x99s的代码\xe2\x80\x9cwe\xe2\x80\x99将让浏览器做任何他们想做的事情认为是最好的，然后尝试让他们在几年的不同做法后表现一致\xe2\x80\x9d。

\n\n

此外，最新的 CSS 内联布局模块在第 1 部分（行高和基线对齐）的顶部指出：

\n\n

\n

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

\n

\n\n

上个月的\xe2\x80\x99s。所以，你知道，基本上，祝你好运，万事如意。

\n\n

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

\n\n

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

\n