Question

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

例如：

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

现在webfont应该

letter-spacing:2px;

但是winfont应该

letter-spacing:-4px;

我该如何管理？

谢谢

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

字体回退：如何指定“字体特定”规则？

1 个答案: