通過子集和本地存儲提高字體性能

關鍵要點

• 字體子集化：去除網頁字體中未使用的字符，顯著減小文件大小，提升網頁字體性能。 Font Squirrel 的webfont 生成器等工具可輔助子集化和編碼過程。
• 回退字體：在實際字體下載期間顯示回退系統字體，確保網站內容即時訪問，提升網站或應用的感知性能。
• 本地存儲：將網頁字體保存在本地存儲中，顯著提升字體性能。字體可在會話甚至設備重啟後持續存在，無需每次加載網頁都重新下載。但需注意，此方法依賴於用戶瀏覽器是否支持本地存儲。

近期一種備受關注的技術是：使用子集化方法減小網頁字體大小，將其編碼為base64，並存儲在本地存儲中。如果使用不當，網頁字體會嚴重影響性能，並可能阻止訪問網站內容。

此技術可減小字體文件大小，並異步將其存儲在本地存儲中，在字體下載期間顯示回退系統字體。這與本地存儲的一些固有特性相結合，使字體能夠持久緩存。這意味著字體將保留在客戶端機器上，跨會話甚至設備重啟後依然存在。

字體子集化

字體子集化是提升網頁字體性能最重要的方法之一。子集化就是從字體文件中刪除未使用的字符。未使用的字符通常是您不使用的語言中的字符，或者您的網站或應用可能不需要但通常嵌入在字體文件中的特殊字符。通過子集化，您可以將文件大小減少高達50%。

您可以使用Font Squirrel 的webfont 生成器來對字體進行子集化和base64 編碼，生成一個最終文件（確保選擇專家選項以訪問自定義子集化，並在表單的“CSS”部分選擇“ Base64 編碼”）。

完成後，您將獲得一個樣式表文件，其中包含所有壓縮的網頁字體，可通過單個請求重複使用。

選擇回退字體

為避免用戶在瀏覽器嘗試下載字體文件時等待，最好顯示回退系統字體。這允許立即訪問內容（畢竟，這就是用戶訪問網站的目的）。

同步加載字體會使文本在瀏覽器等待字體文件時保持空白，用戶在等待文件下載完成時將無法閱讀內容。

使用異步加載和合適的回退字體，用戶將立即看到以回退字體顯示的文本，並在文件下載完成後字體切換到您選擇的網頁字體。

您可以對回退字體進行樣式設置，使過渡更平滑，減少內容的重排。由於用戶可以無延遲地訪問您的內容，因此這立即提升了網站或應用的感知性能。

要查找不同操作系統可用的系統字體，您可以查看以下資源：

• CSS 字體堆棧 – Mac 和 Windows 的完整 web 安全 CSS 字體堆棧集合。
• iOS 字體 – 列出每個 iOS 版本的每種字體。

在 Android 上，由於存在大量分支和不同品牌的使用，很難確定哪些是系統字體。但是，Android 上最常見的字體是：Droid Serif、Droid Sans、Droid Mono 和 Roboto。

使用本地存儲保存網頁字體

首先，我們將一個類添加到將保存回退字體樣式的 DOM 節點。稍後，我們將使用 JavaScript 將其替換為具有已加載字體樣式的類。我們還將保存指向字體文件的路徑到一個變量，以便稍後重複使用。

document.documentElement.className = 'fallback';
var css_href = '../path/fonts.css';

接下來，我們需要通過嘗試將項目設置到本地存儲並從中獲取項目來檢查本地存儲支持。某些瀏覽器無法在私有模式下存儲任何內容，但 window.localStorage 仍將返回存儲對象。我們需要這個額外的請求來確保我們的腳本能夠正常工作：

var localStorageSupported = function() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch(e) {
    return false;
  }
};

如果瀏覽器通過了 localStorageSupported 測試並且我們的字體文件已存儲，我們可以獲取該文件並使用 injectRawStyle() 函數將其添加到頁面標題內的 style 標籤中。如果瀏覽器未通過測試，則在 onLoad 事件上調用 injectFontsStylesheet() 函數，這樣就不會阻塞 ui 線程：

if (localStorageSupported() && localStorage.webFonts) {
  injectRawStyle(localStorage.webFonts);
} else {
  window.onload = function() {
    injectFontsStylesheet();
  };
}

injectFontsStylesheet() 函數發出 xhr 請求以獲取字體文件內容，借助 injectRawStyle 函數將其註入標題，並將其保存到本地存儲：

function injectFontsStylesheet() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', css_href, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      injectRawStyle(xhr.responseText);
      localStorage.webFonts = xhr.responseText;
    }
  };
  xhr.send();
}

此函數在文檔的頭部創建 style 標籤，並通過 text 參數獲取其內容。在此階段，我們還將回退類替換為具有網頁字體樣式的字體類：

function injectRawStyle(text) {
  var style = document.createElement('style');
  style.innerHTML = text;
  document.getElementsByTagName('head')[0].appendChild(style);
  document.documentElement.className = 'webFont';
}

現在我們需要回退字體和網頁字體的實際樣式。您可以通過刷新瀏覽器並觀察內容的重排來測試這些樣式。目標是盡可能使回退字體樣式與實際樣式匹配，以便更改的感知變得幾乎不可察覺。

.fallback {
  font-family: Verdana, sans-serif;
  line-height: 1.58em;
  letter-spacing: 0px;
  font-size: 9px;
}

.webFont {
  font-family: 'Proxima-Nova', sans-serif;
  line-height: 1.3em;
  letter-spacing: 2px;
  font-size: 13px;
}

(演示和總結部分由於篇幅過長，建議根據實際情況選擇性保留或精簡) 該部分主要包含CodePen演示鏈接以及對前面內容的總結，可以根據需要進行調整。 關鍵是保留核心技術點，例如子集化、回退字體和本地存儲的運用方法。 FAQ部分也可以根據需要進行精簡或保留。

以上是通過子集和本地存儲提高字體性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！