根据字体设置不同的线高

Question

我想line-height为列表后备字体设置不同的字体.例如:

body {
    font-family: "Small x-height font", "Larger x-height font", sans-serif;
}

当使用首选的小x高度字体时,我想设置line-height为1.3.当使用较大的x高度字体,因为首选字体不可用时,我想设置line-height为1.5.当两种字体都不可用并且使用sans-serif后备时,我想设置line-height为normal.

这可能使用CSS 2.1或CSS 3而不诉诸JavaScript吗？

基本原理问题是不同的字体具有不同的x高度(小写字母的高度,例如x相对于字体大小).要使具有较大x高度的文本看起来很好,必须使用较大的线高设置.默认字体的x高度(上例中的sans-serif)是未知的,可能与我们选择的字体的x高度有很大不同.因此,当字体加载失败时,使用我们的字体看起来很好的行高可能看起来很难看.

Answer 1

我不相信有一种方法可以按照您要求的方式执行此操作.但是,我可以告诉您,如果您使用的是字体服务(例如Typekit),您可以根据字体是否已加载来设置后备字体的样式.

在Typekit的情况下,当字体加载,加载或不活动时,它们会向元素添加类.它们还提供特定字体/权重的类.

然后,您可以根据具体情况提供特定样式.
这是一个粗略的例子:

body {
  font: 400 16px/1.5 "typekit-font", "fallback-font";
}
.wf-inactive body {
  font-weight: normal;
  line-height: 1.8;
}

更多信息可以在相应的帮助文章中找到.