根据字体设置不同的行高

Question

我想为列表备用字体中的不同字体设置不同的line-height。例如：

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

当使用首选x-height 小字体 时，我想将line-height 设置为1.3。当 使用较大的 x 高度字体 时，因为首选字体不可用，我想将 line-height 设置为 1.5。当两种字体都不可用且使用无衬线回退时，我想将line-height 设置为normal。

这是否可以在不借助 JavaScript 的情况下使用 CSS 2.1 或 CSS 3？

基本原理 问题在于不同的字体有不同的x-height（小写字母如x相对于字体大小的高度）。为了使 x 高度较大的文本看起来更好，必须将其设置为较大的行高。默认字体（上例中的无衬线字体）的 x 高度是未知的，并且可能与我们选择的字体的 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;
}

更多信息可以在their corresponding help article找到。

Answer 2

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

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

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

Answer 3

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

只有 Firefox 实现 font-size-adjust（截至 2012 年 11 月）。 WebKit 没有。

有关更多信息，请参阅 CSS3 Fonts 规范，有关示例，请参阅 David Baron's post。