1

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

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

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

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

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

4

2 回答 2

0

这有点牵强，但如果您的 typekit 字体发出“非活动”事件，您可能可以使用 typekit 的字体事件有条件地加载 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 秒后加载）

于 2013-06-07T21:29:30.840 回答
0

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

于 2013-06-07T21:01:45.693 回答