如何更改后备字体的字体大小和样式

Question

我使用'自由式脚本'字体来设置我的网站标题和格鲁吉亚作为后备字体。我从squirrel下载了'freestyle'webfontkit，我使用@ font-face来渲染标题样式。 对于支持@ font-face的浏览器来说，一切都很好，但对于那些不支持@ font-face的浏览器，就像旧版Android的默认浏览器一样，我遇到了问题。

问题是，使用自由式脚本我想保留

  h1
   {
    font-size:25px; 
    font-style:normal;
   }

但是我的后备字体（格鲁吉亚）我想保留

   h1
    {
      font-size:18px;
      font-style:italic;
    }

我在网上找到的一个解决方案是使用modernizr ... http://webdesignerwall.com/tutorials/css3-font-face-design-guide 但是我正在寻找一个更简单且没有js的解决方案，因为我的网站在页面加载之前已经使用了很多js并且由于这个而加载有点慢

我在SO上发现了一个类似的问题.. Selectively Style Fallback Fonts Without JavaScript? 但除了现代化解决方案之外，没有任何明确的答案......

如果有人可以解决这个问题，那将会很有帮助。

...提前致谢

Answer 1

我所知道的方法没有使用现代化器。把它贴在你的HTML头上。不知道人们如何能够没有它。为了保持小巧，只需选择@ font-face即可使用最小的Modernizer副本。此外，如果您在Apache服务器上，通过向.htaccess添加一小段代码来GZIP您的html，css和js。这会加速你的速度。

然后执行以下操作：

.fontface h1
 {
  font-size:25px; 
  font-style:normal;
 }

或者单独离开现代浏览器，然后执行：

.no-fontface h1
 {
  font-size:18px; 
  font-style:italic;  
 }

Answer 2

没有JS，没有办法检测font-face支持。最简单的方法是按照建议使用modernizr或者检查Paul Irish的this article。

由于@font-face在桌面浏览器上的效果相当good support，因此我会考虑移动浏览器需要回退。如果是这种情况，您可能需要研究移动浏览器的服务器端检测（参见this question）。

最后，您可以尝试使用font-size-adjust属性（MDN docs和article）。我以前从未使用它，我无法找到浏览器支持的好处，因此您需要进行一些测试。

Answer 3

如果您不想使用Modernizr，我写了stand-alone check that's 2.2KB minimized并在HTML标记中添加了一个类，以指示是否支持@font-face。然后，您可以像使用Modernizr一样调整样式：

.fontfacerender h1
{
  /* special font */
}

.no-fontfacerender h1
{
  /* default font */
}