Web Font Loader是否不缓存字体？

Question

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

这是我加载字体的方式:

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

我在用Web Font Loader v1.5.10.

BramVanroy的附录:当使用谷歌的网页字体时,也存在"缺乏缓存".FOUT(无格式文本的Flash)在使用字体加载器的网站上短暂出现,即使多次重新加载页面也是如此.

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

Answer 1

Web 字体加载器没有缓存规定，但当且仅当您实际在站点中的某个位置使用该字体时，您的浏览器才会缓存该字体。检查以确保在相关页面的某处调用该字体。

您可以通过强制使用 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。