根据字体设置不同的线高

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;
}

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

Answer 2

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

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

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

Answer 3

在CSS中，您无法使属性的值取决于字体的选择。基本上，属性是相互独立的，有些例外情况不适用于此。

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

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