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

我问这个是因为当我尝试为多语言内容(如英文和中文)创建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上

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