4

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

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

当使用首选的Small x-height 字体时，我想设置line-height为 1.3。当由于首选字体不可用而使用较大的 x 高度字体时，我想设置line-height为 1.5。当两种字体均不可用且使用 sans-serif 后备时，我想设置line-height为normal.

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

基本原理问题在于不同的字体有不同的 x 高度（小写字母的高度，例如 x 相对于字体大小）。为了使 x 高度较大的文本看起来更好，必须将其设置为较大的行高。默认字体（上例中的无衬线字体）的 x 高度是未知的，并且可能与我们选择的字体的 x 高度有很大不同。因此，当字体加载失败时，与我们的字体看起来不错的行高可能看起来很难看。

4

3 回答 3

5

我不相信有办法按照您要求的方式执行此操作。但是，我可以告诉您，如果您使用字体服务（例如 Typekit），您可以根据字体是否已加载来设置备用字体的样式。

在 Typekit 的案例中，它们在字体加载、加载或非活动时向元素添加类。它们还为特定的字体/粗细提供类。

然后，您可以根据情况提供特定的样式。
这是一个粗略的例子：

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

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

于 2012-11-03T21:33:18.800 回答
1

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

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

有关更多信息，请参阅CSS3 字体规范，有关示例，请参阅David Baron 的帖子。

于 2012-11-04T02:41:34.523 回答
0

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

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

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

于 2012-11-03T22:46:05.227 回答