關(guān)鍵要點

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

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

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

字體子集化

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

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

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

選擇回退字體

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

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

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

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

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

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

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

使用本地存儲保存網(wǎng)頁字體

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

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

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

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

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

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

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

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

此函數(shù)在文檔的頭部創(chuàng)建 style 標(biāo)籤，並通過 text 參數(shù)獲取其內(nèi)容。在此階段，我們還將回退類替換為具有網(wǎng)頁字體樣式的字體類：

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

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

.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;
}

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

以上是通過子集和本地存儲提高字體性能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！