css - 根据字体设置不同的行高

Question

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

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

当使用首选的 Small x-height 字体时，我想设置 line-height到 1.3。当由于首选字体不可用而使用较大的 x-height 字体时，我想设置 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 .