为不同的字体系列指定不同的字体大小 [英] Specifying different font-sizes for different font-families

问题描述

是否可以为不同的字体系列指定不同的字体大小.我要使用的字体(用于产品商标)是一种罕见的字体(FlashDLig)，并非所有PC和浏览器都支持. (我的一台装有IE 9的Windows 7 PC无法显示它...)现在我使用Arial作为后备字体，问题是arial比FlashDLig大得多，因此我想在其中指定其他字体大小同一个班级.有可能吗?

Is there a way to specify a different font-size for a different font-family. The font I want to use(for purposes of product branding) is a somewhat rare font (FlashDLig) not supported by all PC's and browsers. (my one windows 7 PC with IE 9 does not display it...) Now for a fallback font I use Arial, the problem is that arial is much larger than FlashDLig, so I want to specify a different font-size for it in the same class. Is it possible?

我知道您可能可以使用font-size-adjust，但是仅Firefox支持.

I know you can probably use font-size-adjust but it is only supported in Firefox.

有什么建议吗?也许是Javascript魔术?

Any suggestions? Javascript magic maybe?

谢谢

推荐答案

我建议默认为Arial，然后创建第二个类，该类使用为字体声明的@ font-face.然后，我认为您必须使用Javascript来测试字体是否能够加载(也许检查屏幕外放置的某些元素的派生样式)，如果可以，请将类更改为新类.我之所以这样做而不是从您的自定义字体开始的原因与 渐进增强 .

I would recommend defaulting to Arial, and then create a second class that uses a @font-face declared for your font. Then I think you'd have to use Javascript to test whether the font was able to load (maybe check derived style of some element you put off-screen), and if so, change the class to the new one. The reason I'd do it that way instead of starting with your custom font has to do with the idea of progressive enhancement.

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

Here's one way to change the class in 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;
}

这篇关于为不同的字体系列指定不同的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！