Question

现在我们有一种字体用于主字体并来自Typekit。我们希望从Google Webfonts中获得回退。 Typekit字体使用工具包js实现。

我们现在的问题是我们想避免调用不同的CDN。我们不想加载两个不同的字体集。字体堆栈看起来像这样：

“Typekit Font”，Google Font，Arial，sans-serif ....

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

我不是开发人员，但我已经处理了一个，他说这不可能。只需要一些食物让这位开发人员继续这样做。

Answer 1

您可以先使用JavaScript检测浏览器类型，然后加载一组CSS样式，每个样式包含一个单独的字体系列。媒体查询也可以。对不起，有很多例子可以开始。

Answer 2

这有点紧张，但如果您的typekit字体发出“非活动”事件，您可以使用typekit的Font Events来有条件地加载Google Web字体。这个问题是您的字体可能需要5秒钟才能“超时”，并且在此过程发生时您的用户将处于困境中。

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

那就是说，这个JS应该是一个开始（尽管是丑陋的）：

<强> 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秒后加载）

两个Webfonts（Google＆amp; Typekit）一个作为后备，如何避免通话？

2 个答案: