@font-face 替代字体的字体大小
Posted
技术标签:
【中文标题】@font-face 替代字体的字体大小【英文标题】：Font size for @font-face alternative 【发布时间】：2012-07-15 00:05:36 【问题描述】：我正在使用@font-face，它必须具有较大的字体大小。例如标题的字体大小是 54 像素，这通常是很大的，但在这种字体中它看起来是中等的。
所以问题是，当页面加载时，替代字体显得非常大并且破坏了整个布局。
有没有办法为替代字体指定字体大小？
【问题讨论】：
【参考方案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 插件，用于测试何时呈现后备字体。
【讨论】：
以上是关于@font-face 替代字体的字体大小的主要内容，如果未能解决你的问题，请参考以下文章