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

这是我加载字体的方式:

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

我正在使用Web Font Loader v1.5.10

BramVanroy的附录:使用Google的网络字体时也存在这种“缓存不足”。即使在多次重新加载页面后,使用字体加载器的网站上也会短暂发生FOUT(无样式文本闪烁)。

由eldi编辑:嗨,BramVanroy->现在,我不太确定如何解决此问题,但可能只是使用了@font-face。我测试Web字体加载程序的原因首先是FOUT。加载程序将css类添加到html元素中,从而为您提供了一种在不使用正确字体的情况下对页面进行样式设置的方法,当加载字体时,该类消失了,并且出现了“标准”样式。这按预期工作,但是有“缺少缓存”异常,在我看来,这是 Not Acceptable 。我相信通过修改HTTP header 的staypuftman解决方法可以完成这项工作,我没有时间对其进行测试,尤其是我需要进行一些研究以找到在asp.net托管提供程序中进行设置的方法,因为可以从应用程序中进行设置增加额外的处理时间。

最佳答案

Web Font Loader没有缓存设置,但是如果-并且仅当-您实际上在站点中的某个位置使用了字体,则您的浏览器将缓存该字体。检查以确保在相关页面的某处调用了字体。

您可以通过强制HTTP缓存控制 header (good run down of this at 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 );
  });
}

其他资源
  • 细丝组有一个great font-loading rundown。他们不使用网络字体加载器,但是您可以按照他们的操作进行操作。
  • CSS技巧将something similar概述为我的构想,但是在执行我布置的前端检查/设置功能之前,它们会在后端显式设置cookie。
  • 09-11 18:49
    查看更多