根据字体设置不同的线条高度

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。

这是否可以使用CSS2.1或CSS3而不诉诸JavaScript？

基本原理问题是，不同的字体具有不同的x高度(小写字母的高度，例如x相对于字体大小)。要使x高度较大的文本看起来很好，必须设置较大的线条高度。默认字体的x高度(在上面的示例中是sans-serif)是未知的，并且可能与我们选择的字体的x高度有很大的不同。因此，线的高度，与我们的字体看起来很好时，字体可能看起来丑陋的时候，未能加载。

Answer 1

font-size-adjust属性在CSS3中解决了这个问题。您可以为您的font-size-adjust: 0.6指定body，所有字体都将透明地缩放，x高度为0.6em。这有一个额外的好处，你可以组合字体与不同的原始x-高度在同一行，他们将有大致相同的小写字母大小，而不需要手动调整字体大小。

只有Firefox实现了font-size-adjust (截至2012年11月)。WebKit没有。

有关更多信息，请参见CSS3字体规范，一些示例参见大卫·巴伦的职位。

Answer 2

我不相信有办法按照你所要求的方式做这件事。不过，我可以告诉您，如果您使用的字体服务(如Typekit)，您可能能够样式回退字体取决于字体是否已加载。

在Typekit的例子中，当字体加载、加载或不活动时，它们会向元素添加类。它们还为特定的字体/权重提供类。

然后，您可以根据情况提供特定的样式。

下面是一个粗略的例子：

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

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

Answer 3

在CSS中，不能使属性值取决于字体的选择。基本上，属性是相互独立的，除了一些不适用于这里的例外。

通常，font-family列表中的字体在一般特征上应该大致相似。这不仅仅是line-height的问题。字体的选择会影响整个页面。

另一种策略是通过@font-face使用可下载的字体。然后，您可以合理地确定您的字体将被使用，您可以设置线的高度和其他属性根据它。