字体后备：如何指定“特定于字体”的规则？答案

【问题标题】：fonts fallbacks: how to specify "font-specific" rules?字体后备：如何指定“特定于字体”的规则？
【发布时间】：2012-02-01 10:08:44
【问题描述】：

有时网络字体不加载（例如，如果托管在谷歌字体上）和后备可能需要特殊处理，因为它们可能始终与其他指定字体不同

例如：

font-family:'webfontname', 'winfont', 'linuxfont', sans-serif;

现在网络字体应该有

letter-spacing:2px;

但是winfont应该有

letter-spacing:-4px;

我该如何管理？

谢谢

【问题讨论】：

“有时无法加载网络字体” - wat？
我的英语是随机的（），算了。更正
你的英文很好，只是如果你正确嵌入了字体，它应该总是能加载。什么情况下不能从 Google Web Fonts 正确加载字体？
问题是关于样式回退，独立于它们是否是网络字体。谷歌从不宕机，但在我的国家有时连接很糟糕

标签： html css cross-platform

【解决方案1】：

您使用的是Google Web Fonts，所以我建议使用WebFont Loader，例如，您可以根据字体是加载还是加载应用不同的CSS。

这是基于我的第二个链接中的代码的最小示例：

http://jsbin.com/izadif/（垃圾邮件刷新查看）

<!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>

【讨论】：

顺便说一句，您确实需要 JavaScript 来解决这个问题。单独的 CSS 无法根据使用的字体调整 letter-spacing。
听起来真的很痛苦。我希望将来会有另一种方法在@font-face 规则中设置特定的调整。感谢您的回答，暂时投赞成票！