css - 为不同的字体系列指定不同的字体大小

Question

有没有办法为不同的字体系列指定不同的字体大小。我想使用的字体(用于产品品牌推广)是一种不太常见的字体 (FlashDLig)，并非所有 PC 和浏览器都支持。 (我的一台带有 IE 9 的 Windows 7 PC 不显示它......)现在对于我使用 Arial 的后备字体，问题是 arial 比 FlashDLig 大得多，所以我想为它指定一个不同的字体大小同一个类(class)。可能吗？

我知道您可能可以使用 font-size-adjust，但它仅在 Firefox 中受支持。

有什么建议吗？也许是 Javascript 魔法？

谢谢

Answer 1

我建议默认使用 Arial，然后创建第二个使用为您的字体声明的 @font-face 的类。然后我认为你必须使用 Javascript 来测试字体是否能够加载(也许检查你放在屏幕外的某些元素的派生样式)，如果是这样，将类更改为新的。我这样做而不是从您的自定义字体开始的原因与 progressive enhancement 的想法有关。 .

这是在 Javascript 中更改类的一种方法:

if (fontLoaded()) {
    document.body.className += " fontLoaded";
}

然后在你的 CSS 中:

@font-face {
    ... /* declare font face */
}
body {
    font-family: "Arial";
    font-size: 0.8em;
}
body.fontLoaded {
    font-family: "FlashDLig";
    font-size: 1em;
}