在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網頁字體

回答

相關問題