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

【问题标题】：Specifying different font-sizes for different font-families为不同的字体系列指定不同的字体大小
【发布时间】：2012-06-16 21:30:54
【问题描述】：

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

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

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

谢谢

【问题讨论】：

可以看看：stackoverflow.com/questions/7717734/…
但是您为什么不简单地在您的网站上使用@font-face 包含该字体呢？甚至 IE 从 5.5 开始支持它。
嗨 bažmegakapa。谢谢，好主意。这个网站说@font-face 文件类型只支持 IE9 及更高版本...你说的是 IE5.5 及更高版本？ stunningcss3.com/resources/…

标签： css

【解决方案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;
}

【讨论】：

谢谢。欣赏。关于如何实现这部分解决方案的任何想法：“如果是这样，请将类更改为新类”。我认为它必须是一些 Javascript 函数，而 Javascript 不是我的强项

【解决方案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/

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

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

祝你好运！ :)

【讨论】：