16

只是想测试 Web Font Loader 的能力，令人惊讶的是，我发现当我需要在另一个页面中加载相同的字体时，加载器会执行新的下载，而不是使用字体的缓存版本。这是正常的吗？如果是这样，是否有一种简单的方法来检查字体是否可用于浏览器，换句话说，它是否被缓存？

这是我加载字体的方式：

 <script>
    WebFont.load({
        custom: {
            families: ['Univers45custom', 'Univers45customIE']
        }
    });
</script>

我正在使用Web Font Loader v1.5.10.

BramVanroy 的附录：使用 Google 的网络字体时也会出现这种“缺乏缓存”。FOUT（无样式文本的 Flash）在使用字体加载器的网站上短暂出现，即使在多次重新加载页面后也是如此。

由 eldi 编辑：嗨 BramVanroy -> 现在我不确定我是如何解决这个问题的，但可能我只是使用了@font-face. 我测试 Web Font Loader 的原因首先是 FOUT。加载器将 css 类添加到 html 元素，它为您提供了一种在没有正确字体的情况下设置页面样式的方法，当加载字体时，该类就消失了，并且出现了您的“标准”样式。这按预期工作，但出现“缺少缓存”异常，在我的情况下这是不可接受的。我相信修改 HTTP 标头的staypuftman 解决方法可以完成这项工作，我没有时间测试它，特别是我需要做一些研究以找到在 asp.net 托管服务提供商中设置它的方法，因为从应用程序设置它会增加额外的处理时间。

4

2 回答 2

4

Web Font Loader 没有缓存规定，但是当且仅当您在站点的某个地方实际使用它时，您的浏览器才会缓存字体。检查以确保在某处有问题的页面上调用了字体。

您可以通过强制使用 HTTP 缓存控制标头来确保缓存内容（Google Developers 对此进行了很好的总结）。我通常通过 Apache 设置它，就像这样（虽然有很多其他方法可以做到这一点）：

#Set cache-control HTTP header for public with max time
Header set Cache-Control "max-age=290304000, public"

如果所有这些都失败了，我能想到的最好的办法就是设置一个cookie，检查它并相应地加载字体。在您的情况下，代码将如下所示：

// 1- Check for cookie, if it's not present we enter this conditional
if (!font_is_cached) {
  $(window).load(function() {

    // 2- Load your webfont, this would put the font in cache
    WebFont.load({
      custom: {
          families: ['Univers45custom', 'Univers45customIE']
      }
    });

    // 3- Set cookie indicating fonts are cached
    // This leverages Filament Group's cookie.js as a dependency
    // https://github.com/filamentgroup/cookie/blob/master/cookie.js
    // Sets a one-day session cookie
    cookie( "font_is_cached", "true", 1 );
  });
}

其他资源

  • Filament Group 有一个很好的字体加载纲要。他们不使用网络字体加载器，但您可以按照他们的做法进行操作。
  • CSS-tricks 概述了与我的想法类似的内容，但它们在执行我布置的前端检查/设置功能之前明确地在后端设置了 cookie。
于 2015-10-21T22:19:18.977 回答
3

WebFont Loader 会将字体缓存到网络浏览器中 1 年，这里详细介绍了如何将 webfont 最终详细信息加载到浏览器缓存中的时间。

http://peterwilson.cc/caching-google-webfont-loader/

网页字体加载器

使用链接字体时，Web Font Loader 通过@font-face. 它提供了一个通用接口来加载字体，而不管源是什么，然后添加一组标准事件，您可以使用这些事件来控制加载体验。Web Font Loader 能够加载来自Google Fonts、 Typekit 、 Fonts.com和Fontdeck的字体，以及自托管的 Web 字体。它由Google和Typekit共同开发。

于 2015-10-28T04:29:59.050 回答