在HTML5本地存储中保存CSS网页字体

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

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

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

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

$(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>'); 
       } 
      } 
     } 
    })

来源

2013-04-27 And Finally

检查了这一点http://www.sencha.com/learn/taking-sencha-touch-apps-offline/ – wandarkaf 2013-06-19 10:41:44

本教程可能是一个良好的开端：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-23 19:21:14

感谢克里斯，很好的教程..和的.htaccess规则是有用的。从我的例子中可能不清楚的是，我主要希望避免在设备正在下载字体时出现在移动设备上的文本出现延迟 - 对于任何文本出现需要更长的时间..或文本随着浏览器将其重新呈现在自定义字体中，然后出现消失。一种解决方案是仅在文档加载时将样式表附加到字体数据，或者从本地存储中获取字体数据。 – 2013-06-23 21:20:50

不管本地存储如何，在第一次加载时不会发生这种情况吗？无论哪种方式，浏览器都需要先下载字体。 – 2013-06-23 23:01:01

这是正确的 - 在我的例子中，我试图通过推迟直到文档准备来减轻加载的影响，尽管文档加载可能会更好。 – 2013-06-24 14:19:34

-1

守护者的响应式移动网站在github上可用。

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

https://github.com/guardian/frontend

来源

2013-08-15 17:03:50

如果你对上面的链接感兴趣，但是得到一个断开的链接：https：// github。COM /监护人/前端/斑点/ 53e6eec5569f14142299288485b1d3f3cb7e9bca /普通/应用程序/资产/ Javascript角/模块/ fonts.js – 2015-02-18 21:32:27

在HTML5本地存储中保存CSS网页字体

回答

相关问题