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

Question

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

4

有时候网页字体无法加载（例如如果它们托管在Google Fonts上），备用字体可能需要特殊处理，因为它们可能与其他指定的字体有明显不同。

例如：

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

现在Web字体应该已经准备好了

letter-spacing:2px;

但是winfont应该有

letter-spacing:-4px;

我应该如何管理这个？

谢谢。

- user652649

有时候网络字体无法加载 - 什么？ - thirtydot

我的英文是random()，别在意。已经纠正了。 - user652649

你的英语很好，只是如果你正确嵌入字体，它应该总是能够加载。在什么情况下从Google Web Fonts中无法正确加载字体？ - thirtydot

这个问题是关于样式回退的，无论它们是否是Web字体。谷歌从不崩溃，但在我的国家，连接有时很糟糕。 - user652649

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

您正在使用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>