如何使用字體加載器改善頁面性能

要點總結

• 使用字體加載器能顯著提升網頁性能，因為它能控製網頁字體的加載時機和方式，從而縮短頁面加載時間，並避免“未樣式文本閃爍”（FOUT）現象。
• webfontloader JavaScript 庫是一個非常有用的工具，它可以在頁面加載完成後後台加載來自各種來源的字體，並允許使用 CSS 和 JavaScript 回調函數來自定義加載過程。
• 必須平衡字體使用和用戶體驗；雖然字體可以增強網站的美感，但加載大量或多種字體會減慢頁面加載速度，尤其是在移動設備上。因此，使用字體加載器和實現備用字體可以幫助保持流暢快速的用戶體驗。

特別感謝 Jason Pamental 提供的靈感，促成這篇文章的撰寫。否則我可能永遠不會考慮這個問題！ 你上次在網頁中使用 Arial、Times New Roman、Helvetica 或……（不寒而栗）…… Comic Sans 是什麼時候？網頁字體出現得太晚了，但一旦出現，我們就再也沒有回頭。字體很有趣，（通常）免費且易於實現：

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

然後你可以在你的頁面中使用該字體，例如：

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

字體在移動設備上也能正常工作，因此用戶在你的響應式網頁設計中獲得良好的體驗。 或者說，真的如此嗎？

在圖片之後，字體通常是網頁中最大的資源。上面的 Ubuntu 字體會為頁面增加近 250KB 的大小，這在較慢的移動網絡連接上是顯而易見的。 Chrome、IE、Safari 和 Opera 會在字體加載時留下空白空間，因此頁面無法使用。 Firefox 和舊版本的 Opera 會顯示備用字體中的文本，然後切換——這被稱為未樣式文本閃爍 (FOUT)。這兩種情況都不理想。我們很少擔心字體權重問題，並找藉口，例如“這只是第一頁的問題”或“許多用戶已經緩存了字體”。我們可能會省略較少使用的字體；例如，刪除大多數 Ubuntu 斜體樣式可以節省近 40%。很少有人敢於採用使用標準操作系統字體的明顯解決方案——我們的客戶和設計師永遠不會原諒我們。

JavaScript webfontloader

幸運的是，還有另一種選擇：webfontloader。這個 JavaScript 庫可以在頁面加載完成後後台加載來自 Google、Typekit、Fonts.com、Fontdeck 或你自己的服務器的字體。該庫本身會為頁面增加另外 17KB 的大小，但它也會作為後台進程下載。要加載上面的 Ubuntu 字體集，我們創建一個名為 WebFontConfig 的全局對象，該對象定義我們的字體和設置，然後加載 webfontloader 本身：

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

因此，我們可以根據設備和帶寬容量確定是否加載了部分或全部字體。理想情況下，我們可以使用網絡信息 API，但瀏覽器支持仍然有限。或者，請注意 WebFontConfig 中的超時設置；如果字體文件需要超過兩秒鐘才能下載，則請求將被放棄。

CSS 回調函數

webfontloader 在操作期間會將類名應用於 html 元素：

• .wf-loading — 所有字體都已請求
• .wf-active — 所有字體都可用
• .wf-inactive — 無法加載任何字體

還會為各個字體應用類名：

• .wf-<familyname>-<fvd>-loading</fvd></familyname> — 已請求單個字體
• .wf-<familyname>-<fvd>-active</fvd></familyname> — 單個字體可用
• .wf-<familyname>-<fvd>-inactive</fvd></familyname> — 無法加載單個字體

其中 <familyname></familyname> 是字體名稱的淨化版本，<fvd></fvd> 是變體描述，例如 i4 代表 400 粗細的斜體。這允許我們在字體下載後切換字體——與 Firefox 的操作方式相同，例如：

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

JavaScript 回調函數

可以在 WebFontConfig 中定義類似的 JavaScript 回調函數，儘管很少有這種情況有用，例如：

<code class="language-javascript">var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();</code>

有關更多信息，請參閱 webfontloader 文檔。

最小化 FOUT

如果你的備用字體在樣式、粗細或間距方面與你的網頁字體有很大不同，則未樣式文本閃爍會很刺眼。但是，只需進行少量實驗，你就可以調整備用字體、粗細、行高和邊距，以確保在加載網頁字體時頁面元素大致保持在相同的位置……請參閱CodePen 上Craig Buckler (@craigbuckler)的文章《如何使用字體加載器》。

點擊“切換字體”按鈕即可查看字體切換效果。這種變化並非完全不明顯，但重要的是，如果用戶開始閱讀，他們不會失去位置。你可以向任何頁面添加“切換字體”按鈕，以幫助你評估合適的備用樣式：

<code class="language-css">/* 默认操作系统字体 */
body {
    font-family: arial, sans-serif;
}

/* 字体现在已加载 */
.wf-active body {
    font-family: 'Ubuntu';
}</code>

總而言之：字體使用可能是免費的，但請盡量減少用戶的成本。如果你要加載 1MB 的字體文件，那麼你精心創建的響應式網頁設計不適合移動設備！

(以下為FAQ部分，已根據原文進行改寫和整合，並精簡了部分內容)

關於使用字體加載器提升網頁性能的常見問題

什麼是字體加載器？為什麼它對頁面性能很重要？

字體加載器是一種工具，允許你控制如何在你的網站上加載網頁字體。它對頁面性能很重要，因為它可以幫助減少網站的加載時間。網頁加載時，瀏覽器必須下載所有必要的資源，包括字體。如果字體很大或很多，這會減慢頁面加載時間。字體加載器允許你控制這些字體的加載時間和方式，這可以顯著提高你的頁面性能。

字體加載器如何提高頁面性能？

字體加載器通過允許你控製網頁字體的加載來提高頁面性能。你可以選擇異步加載字體，這意味著它們不會阻塞頁面的其餘部分的渲染。這可以顯著減少頁面變得可交互所需的時間。此外，字體加載器可以幫助防止“未樣式文本閃爍”（FOUT）現象，即瀏覽器在網頁字體仍在加載時顯示備用字體。

有哪些常用的字體加載器？

有幾個常用的字體加載器可用，包括 Google 的 WebFont Loader 和 Typekit 的 WebFont Loader。這兩個工具都提供了多種選項來控製網頁字體的加載方式。還有一些 WordPress 插件（例如 Developry Google Fonts）可以輕鬆地在你的網站上實現字體加載。

如何在我的網站上實現字體加載器？

在你的網站上實現字體加載器通常需要向你的 HTML 添加一個腳本。此腳本將加載字體加載器，然後你可以使用字體加載器的 API 來控製網頁字體的加載方式。確切的過程可能因你使用的字體加載器而異，因此最好參考文檔以獲取具體說明。

我可以將字體加載器與任何網頁字體一起使用嗎？

大多數字體加載器都兼容任何網頁字體，只要字體以允許字體加載器加載的方式託管即可。這包括自託管字體和由 Google Fonts 或 Typekit 等字體服務託管的字體。

使用字體加載器會影響我的字體的外觀嗎？

使用字體加載器可能會影響你的字體的外觀，因為它可以幫助防止 FOUT。但是，它不應該改變字體的實際設計或樣式。如果在實現字體加載器後注意到字體的外觀有任何變化，則可能是由於配置問題。

什麼是“未樣式文本閃爍”（FOUT）？字體加載器如何防止它？

FOUT 是一種現象，即瀏覽器在網頁字體仍在加載時顯示備用字體。這可能會導致短暫的文本閃爍，字體與最終字體不同，這可能會讓用戶感到不適。字體加載器通過允許你控制何時將網頁字體應用於文本來防止 FOUT。例如，你可以選擇隱藏文本，直到網頁字體加載完畢，或者你可以顯示備用字體中的文本，然後在網頁字體加載完畢後將其替換。

字體加載器可以改善我的網站的 SEO 嗎？

是的，字體加載器可以通過減少頁面加載時間來改善你的網站的 SEO。頁面加載時間是搜索引擎在對網站進行排名時考慮的一個因素，因此你可以採取任何措施來減少它，這可能會改善你的 SEO。

使用字體加載器有什麼缺點嗎？

使用字體加載器的一個潛在缺點是它可能會增加網站代碼的複雜性。但是，改進的頁面性能和用戶體驗的好處通常超過了這個缺點。此外，許多字體加載器都有良好的文檔記錄和支持，因此相對易於實現。

如何判斷字體加載器是否正在提高我的頁面性能？

你可以在實現字體加載器之前和之後使用各種工具來衡量你的頁面性能。這些工具可以提供頁面加載時間、首次繪製時間和可交互時間等指標，這可以幫助你量化字體加載器的影響。一些常用的性能測量工具包括 Google 的 Lighthouse 和 WebPageTest。

以上是如何使用字體加載器改善頁面性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！