我想设置不同的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 高度有很大不同。因此,当字体加载失败时,与我们的字体看起来不错的行高可能看起来很难看。
最佳答案
我不相信有办法按照您要求的方式执行此操作。
但是,我可以告诉您,如果您使用字体服务(例如 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 .
关于css - 根据字体设置不同的行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13213563/