@font-face 替代字体的字体大小答案

【问题标题】：Font size for @font-face alternative@font-face 替代字体的字体大小
【发布时间】：2012-07-15 00:05:36
【问题描述】：

我正在使用@font-face，它必须具有较大的字体大小。例如标题的字体大小是 54 像素，这通常是很大的，但在这种字体中它看起来是中等的。

所以问题是，当页面加载时，替代字体显得非常大并且破坏了整个布局。

有没有办法为替代字体指定字体大小？

【问题讨论】：

标签： html css fonts font-face font-size

【解决方案1】：

您也许可以使用Modernizr。它将类添加到 <html> 元素，代表浏览器支持的功能。在这种情况下，它为@font-face 支持添加的类是fontface。

我要做的是将标题大小设置为适合替代字体的大小，然后嵌套适当的字体大小，如下所示：

.title {
    font-size: 20px;
    font-family: arial, sans-serif;
}
.fontface .title {
    font-size: 50px;
    font-family: 'alternative-font', arial, sans-serif;
}

不过，即便如此，我想它也可能不会以正确的顺序改变......一般来说，我不会担心加载时布局看起来很有趣，但希望这会有所帮助。

【讨论】：

【解决方案2】：

我会尝试通过 JavaScript 或 jQuery 检索正在使用的字体的 name，如果它不是 @font-face 字体，则相应地调整 font-size。

编辑：
这是一个JavaScript Font Detection 插件，用于测试何时呈现后备字体。

【讨论】：