html - 在 HTML5 本地存储中保存 CSS 网络字体

Question

在构建我们的网站时，我们发现加载网络字体会显着降低移动设备上的页面呈现速度，因此我们在较小的设备上禁用了它们。从那以后，我听说您可以通过将 Web 字体保存在 HTML5 本地存储中来解决这个问题。一位在卫报工作的 friend 告诉我他们的 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 就是这样工作的)。设置过期 header 将为文件推荐建议的缓存时间，防止每次访问时重新下载。

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