要點(diǎn)總結(jié)

• 使用字體加載器能顯著提升網(wǎng)頁性能，因?yàn)樗芸匮u網(wǎng)頁字體的加載時(shí)機(jī)和方式，從而縮短頁面加載時(shí)間，並避免“未樣式文本閃爍”（FOUT）現(xiàn)象。
• webfontloader JavaScript 庫是一個(gè)非常有用的工具，它可以在頁面加載完成後後臺加載來自各種來源的字體，並允許使用 CSS 和 JavaScript 回調(diào)函數(shù)來自定義加載過程。
• 必須平衡字體使用和用戶體驗(yàn)；雖然字體可以增強(qiáng)網(wǎng)站的美感，但加載大量或多種字體會減慢頁面加載速度，尤其是在移動設(shè)備上。因此，使用字體加載器和實(shí)現(xiàn)備用字體可以幫助保持流暢快速的用戶體驗(yàn)。

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

<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>

字體在移動設(shè)備上也能正常工作，因此用戶在你的響應(yīng)式網(wǎng)頁設(shè)計(jì)中獲得良好的體驗(yàn)。 或者說，真的如此嗎？

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

JavaScript webfontloader

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

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

因此，我們可以根據(jù)設(shè)備和帶寬容量確定是否加載了部分或全部字體。理想情況下，我們可以使用網(wǎng)絡(luò)信息 API，但瀏覽器支持仍然有限?；蛘撸堊⒁?WebFontConfig 中的超時(shí)設(shè)置；如果字體文件需要超過兩秒鐘才能下載，則請求將被放棄。

CSS 回調(diào)函數(shù)

webfontloader 在操作期間會將類名應(yīng)用於 html 元素：

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

還會為各個(gè)字體應(yīng)用類名：

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

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

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

JavaScript 回調(diào)函數(shù)

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

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

有關(guān)更多信息，請參閱 webfontloader 文檔。

最小化 FOUT

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

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

/* 默認(rèn)操作系統(tǒng)字體 */
body {
    font-family: arial, sans-serif;
}

/* 字體現(xiàn)在已加載 */
.wf-active body {
    font-family: 'Ubuntu';
}

總而言之：字體使用可能是免費(fèi)的，但請盡量減少用戶的成本。如果你要加載 1MB 的字體文件，那麼你精心創(chuàng)建的響應(yīng)式網(wǎng)頁設(shè)計(jì)不適合移動設(shè)備！

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

關(guān)於使用字體加載器提升網(wǎng)頁性能的常見問題

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

字體加載器是一種工具，允許你控制如何在你的網(wǎng)站上加載網(wǎng)頁字體。它對頁面性能很重要，因?yàn)樗梢詭椭鷾p少網(wǎng)站的加載時(shí)間。網(wǎng)頁加載時(shí)，瀏覽器必須下載所有必要的資源，包括字體。如果字體很大或很多，這會減慢頁面加載時(shí)間。字體加載器允許你控制這些字體的加載時(shí)間和方式，這可以顯著提高你的頁面性能。

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

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

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

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

如何在我的網(wǎng)站上實(shí)現(xiàn)字體加載器？

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

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

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

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

使用字體加載器可能會影響你的字體的外觀，因?yàn)樗梢詭椭乐?FOUT。但是，它不應(yīng)該改變字體的實(shí)際設(shè)計(jì)或樣式。如果在實(shí)現(xiàn)字體加載器後注意到字體的外觀有任何變化，則可能是由於配置問題。

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

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

字體加載器可以改善我的網(wǎng)站的 SEO 嗎？

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

使用字體加載器有什麼缺點(diǎn)嗎？

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

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

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

以上是如何使用字體加載器改善頁面性能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！