Question

有没有办法为不同的font-family指定不同的字体大小。我想要使用的字体（用于产品品牌）是一种有点罕见的字体（FlashDLig），并不是所有PC和浏览器都支持。（我的一台带有IE 9的Windows 7 PC不显示它...）现在对于后备字体我使用Arial，问题是arial比FlashDLig大得多，所以我想为它指定一个不同的字体大小同一个班级。有可能吗？

我知道你可以使用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;
}

Answer 2

查看以下代码示例：

http://www.lalit.org/lab/javascript-css-font-detect/

和

http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

并根据检测结果调整样式表。

我前段时间使用这些效果很好。

祝你好运！：）

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

2 个答案: