字体回退：如何指定“字体特定”规则？ [英] fonts fallbacks: how to specify "font-specific" rules?
问题描述
有时网页字体无法加载（例如，如果托管在google字体上）
和回退可能需要特殊处理，因为它们可以始终不同于其他指定的字体
sometimes web-fonts don't load (for instance if hosted on google fonts) and fallbacks may need special treatment, because they can be consistently different from other specified fonts
例如：
font-family:'webfontname', 'winfont', 'linuxfont', sans-serif;
现在webfont应该有
now the webfont should have
letter-spacing:2px;
但是winfont应该有
but winfont should have
letter-spacing:-4px;
如何管理？
谢谢
推荐答案
您正在使用 Google网页字体，因此建议您使用 WebFont Loader ，这将允许你，例如，应用不同的CSS取决于字体是否加载或加载。
You're using Google Web Fonts, so I suggest using the WebFont Loader, which will allow you to, for example, apply different CSS depending on whether the font is loading or loaded.
这里是一个基于我的第二个代码链接：
Here's a minimal example based on the code from my second link:
http://jsbin.com/izadif/ （垃圾邮件刷新查看）
http://jsbin.com/izadif/ (spam refresh to see it)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Cantarell' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<style type="text/css">
.wf-loading h1 {
font-family: serif;
font-size: 16px;
color: red;
letter-spacing: 20px;
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>This is using Cantarell</h1>
</body>
</html>
这篇关于字体回退：如何指定“字体特定”规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
