在 HTML5 本地存储中保存 CSS Web 字体

Question

在构建我们的网站时，我们发现加载网络字体会显着减慢手机上的页面呈现速度，因此我们在较小的设备上禁用了它们。我听说你可以通过将网络字体保存在 HTML5 本地存储中来解决这个问题。一位在 Guardian 工作的朋友告诉我，他们的 mobile site 将其字体作为 base64 编码字符串保存在本地存储中。

我可以很容易地理解如何保存字体，但我试图找出在检索字体时将其加载到浏览器中的最佳方式。使用 Javascript，我可以将 base64 字符串附加到页面头部的样式标记中，但是当我需要注意页面权重时，我会添加到每个页面的数据大小。有没有更有效的方法可以加载 font-face CSS 声明？例如，如果它在一个单独的 CSS 文件中，浏览器会缓存它。

编辑 ----------------------------------------------

我已经想出了这个例子。如果设备有一个小屏幕，我会检查 localStorage 的字体数据。如果它在 localStorage 中不存在，我会执行 ajax 请求，将数据附加到我的页面头部并将其存储在 localStorage 中。如果它确实存在，我只是附加它。这看起来像是在移动设备上加载网络字体的一种有效方式吗？

   $(document).ready(function () {
        if ($(window).width() < 481) {
            if (typeof(Storage) !== 'undefined') {
                if (localStorage.getItem('base64fonts') === null) {
                    $.ajax({
                        url: 'fonts-base64.css',
                        success: function(response){
                            $('head').append('<style>' + response + '</style>');
                            localStorage.setItem('base64fonts', response);
                        },
                        dataType: 'text'
                    });
                } else {
                    $('head').append('<style>' + localStorage.getItem('base64fonts') + '</style>');
                }
            }
        }
    })

Answer 1

本教程可能是一个不错的起点：http://toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api/

另外，您有什么理由不能通过调整.htaccess 文件设置让浏览器缓存这些内容？

# Webfonts
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  ExpiresByType application/x-font-ttf    "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"

来源：https://github.com/cferdinandi/htaccess

浏览器会自动下载合适的字体文件（@font-face 就是这样工作的）。设置过期标头将为文件推荐建议的缓存时间，防止每次访问时重新下载。

我在我开发的几个网站上使用了这种技术，它极大地加快了后续访问的加载时间。

Answer 2

卫报的响应式移动网站在 github 上可用。

这是他们对字体的本地存储所做的。

https://github.com/guardian/frontend