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

问题描述：

我正在使用'自由式脚本'字体来将我的网站标题和格式设置为后备字体。我已经从松鼠下载了'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? 但was'nt除了Modernizr的解决方案的任何明确的答案......

这将是很大的帮助，如果有人可以提供一些解决这个问题。

...在此先感谢

这是一个真正的问题？自从2.2版本开始，Android支持'@ font-face'。 –

答

没有方法，我知道那不使用modernizer。把它放在你的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; 
}

Modernizer

谢谢出租车关于GZIP的提示。我知道最简单的现代化装置，但对使用它很怀疑...看起来GZIP会做的诀窍..现在我将与Modernizer ...荣誉:) – kruxatur

答

有没有办法来检测字体面的支持，而JS 。最简单的方法是使用modernizr作为建议或检查Paul Irish的this article。

由于@font-face在台式机浏览器上有相当的good support我会全力以赴并假设您需要对移动浏览器进行回退。如果是这种情况，也许您应该查看移动浏览器的服务器端检测（请参阅this question）。

最后，您可以尝试使用font-size-adjust属性（MDN docs和article）。我以前从来没有使用过它，但我无法了解各种浏览器支持多好，因此您需要进行一些测试。

谢谢Teo的一些真的很不错的链接......我认为font-size-adjust将会是我正在寻找的确切的东西，但是它只能被FF支持。我可以在没有将我的网站标题改为不支持@ font-face的一小组浏览器的情况下生活，但font-size-adjust是必须的...我希望它能够被所有浏览器支持...不管怎样，再次感谢.SO岩石 – kruxatur

答

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

.fontfacerender h1 
{ 
    /* special font */ 
} 

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

谢谢RoelN.I'll会试一试。 – kruxatur

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

相关推荐