2

在构建我们的网站时，我们发现加载网络字体会显着减慢手机上的页面渲染速度，因此我们在较小的设备上禁用了它们。我听说你可以通过将网络字体保存在 HTML5 本地存储中来解决这个问题。一位在卫报工作的朋友告诉我，他们的移动网站将其字体作为 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>');
                }
            }
        }
    })
4

2 回答 2

0

本教程可能是一个很好的起点：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工作原理）。设置过期标头将为文件推荐建议的缓存时间，防止每次访问时重新下载。

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

于 2013-06-23T19:21:14.963 回答
-1

Guardian 的响应式移动网站可在 github 上找到。

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

https://github.com/guardian/frontend

于 2013-08-15T17:03:50.483 回答