两种 Webfonts (Google & Typekit) 一种作为 Fallback，如何避免调用？答案

【问题标题】：Two Webfonts (Google & Typekit) One as Fallback, how to avoid calls?两种 Webfonts (Google & Typekit) 一种作为 Fallback，如何避免调用？
【发布时间】：2013-06-06 12:32:16
【问题描述】：

现在我们有一种使用主要字体的字体，来自 Typekit。我们希望从 Google Webfonts 中获得回退。 Typekit字体是用kit js实现的。

我们现在的问题是我们希望避免调用不同的 CDN。我们不想加载两种不同的字体集。字体堆栈将如下所示：

“Typekit 字体”、Google 字体、Arial、sans-serif ....

我的问题真的很容易回答。有没有一种简单的方法可以避免这种调用并检查主字体是否不可用？并加载另一个？

我不是开发人员，但我已经处理了一个，他说这做不到。只是需要一些食物让这个开发者继续做下去。

【问题讨论】：

标签： javascript css web webfonts

【解决方案1】：

这有点牵强，但如果您的 typekit 字体发出“非活动”事件，您可能可以使用 typekit 的 Font Events 有条件地加载 Google Web 字体。这样做的问题是，您的字体“超时”最多可能需要 5 秒，而在此过程发生时，您的用户将陷入困境。

我真的建议不要这样做，而只是使用体面的 CSS 后备。

也就是说，这个 JS 应该是一个开始（虽然很丑）：

<script type="text/javascript" src="//use.typekit.net/vio0gns.js"></script>
<script type="text/javascript">
  try {

  var config = {
      scriptTimeout: 3000 // tweak as necessary
    };

    Typekit.load({
      loading: function() {

      },
      active: function() {

      },
      inactive: function() {
         console.log('Font Timed Out');
         WebFontConfig = {
           google: { families: [ 'Balthazar::latin' ] }
         };
         (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);
         })(); 
      }
    })
  } catch(e) {}

</script>

Codepen Example（谷歌字体应该在 3-5 秒后加载）

【讨论】：

【解决方案2】：

您可以首先使用 JavaScript 检测浏览器类型，然后加载一组 CSS 样式，每个样式都包含一个单独的字体系列。媒体查询也可以工作。抱歉，这里的例子太多了。

【讨论】：