如何優(yōu)雅地加載Fonts
使用網(wǎng)絡(luò)字體的工作流很簡單，是吧？選擇一些看起來不錯(cuò)的網(wǎng)絡(luò)可用字體，獲取 HTML 或 CSS 代碼段，將其放入項(xiàng)目中，然后檢查它們是否顯示正確。人們每天數(shù)以千次地像這樣操作谷歌字體：將它的<link>標(biāo)簽放入<head>中。
我們來看下Lighthouse是如何評(píng)價(jià)這樣的工作流的。
Lighthouse
標(biāo)簽中的樣式表被Lighthouse標(biāo)記為阻塞渲染的資源，它們竟然讓渲染增加了一秒鐘？這看起來不是很好。
我們已經(jīng)按照書籍，文檔，HTML標(biāo)準(zhǔn)完成了所有工作，為什么Lighthouse還是會(huì)告訴我這樣不對(duì)呢？
讓我們來討論下如何讓字體樣式文件成為非渲染阻塞資源，并且探討一種不僅讓Lighthouse滿意，還要解決加載字體時(shí)通常會(huì)出現(xiàn)糟糕的無樣式文本閃爍(FOUT)問題。我們將使用原生的HTML，CSS和JavaScript來完成這些工作，因此我們可以在任何技術(shù)棧中使用它們。另外我們還將介紹下Gatsby的實(shí)現(xiàn)以及一個(gè)由本人開發(fā)的簡單、開箱即用的插件。
什么是渲染阻塞字體
瀏覽器加載網(wǎng)頁時(shí)，會(huì)從DOM（HTML的一個(gè)對(duì)象模型）和CSSOM（所有css選擇器的映射）中生成渲染樹。渲染樹是關(guān)鍵渲染路徑中的一部分，關(guān)鍵渲染路徑代表了瀏覽器在渲染頁面中的每個(gè)步驟。瀏覽器為了渲染一個(gè)頁面，需要加載并解析HTML文檔以及鏈接到該HTML中的每個(gè)CSS文件。
下面是一個(gè)非常典型的直接從谷歌字體樣式表：
- @font-face {
- font-family: 'Merriweather';
- src: local('Merriweather'), url(https://fonts.gstatic.com/...) format('woff2');
- }
你可能會(huì)認(rèn)為字體樣式的文件體積很小，因?yàn)樗麄兺ǔＷ疃喟恍〡font-face定義。因此它們應(yīng)該不會(huì)對(duì)頁面渲染造成可以感知的影響，事實(shí)是這樣嗎？
假設(shè)我們正在從外部CDN服務(wù)器加載一個(gè)CSS字體文件。當(dāng)我們的網(wǎng)頁在加載時(shí)，瀏覽器需要等待文件從CDN服務(wù)器上加載并且載入到渲染樹中。不僅如此，它還需要等待在CSS的@font-face屬性中定義的作為URL值引用的字體文件請(qǐng)求并加載完成。
關(guān)鍵點(diǎn)：字體文件成為關(guān)鍵渲染路徑的一部分，并且延遲了頁面的渲染。
加載字體樣式表和字體文件時(shí)阻塞了關(guān)鍵渲染路徑
對(duì)于普通用戶來說網(wǎng)站最重要的部分是什么？當(dāng)然是內(nèi)容了。因此在頁面加載過程中我們必須盡快將內(nèi)容呈現(xiàn)給用戶。為此，關(guān)鍵渲染路徑必須精簡到只剩下關(guān)鍵資源(例如HTML和關(guān)鍵的CSS)，其余的內(nèi)容將在頁面渲染完成后加載，包括字體。
如果一個(gè)用戶正在較差的網(wǎng)絡(luò)環(huán)境下瀏覽未經(jīng)過優(yōu)化的頁面，坐在空白的屏幕前等待字體文件和其他關(guān)鍵資源載入完成將會(huì)使他非常惱火。除非該用戶非常有耐心，否則他很可能會(huì)以為是頁面根本沒有開始加載，直接放棄等待，關(guān)閉窗口。
然而，如果非關(guān)鍵資源的渲染被推遲，內(nèi)容盡可能快地被呈現(xiàn)了出來，用戶將能夠?yàn)g覽頁面并且忽略任何缺少的表現(xiàn)樣式(比如字體)——當(dāng)然，如果字體并不是內(nèi)容的一部分的話。
經(jīng)過優(yōu)化的網(wǎng)站盡可能快地渲染包含關(guān)鍵CSS的內(nèi)容，并且延遲非關(guān)鍵資源的加載。第二個(gè)時(shí)間線的0.5s和1.0s之間出現(xiàn)了一個(gè)字體的切換，表明了顯示樣式開始渲染的時(shí)間。
載入字體的最佳實(shí)踐
重復(fù)造輪子沒有意義。哈里·羅伯茨（Harry Roberts）已經(jīng)很好地介紹了一種加載字體的最佳實(shí)踐。他通過深入的研究以及來自谷歌字體的數(shù)據(jù)，將其歸納為四個(gè)步驟：
- 預(yù)連接到字體文件的站點(diǎn)。
- 以低優(yōu)先級(jí)異步預(yù)加載字體樣式表。
- 在內(nèi)容渲染完成后，使用JavaScript異步加載字體樣式表和字體文件。
- 為關(guān)閉JavaScript的用戶提供一個(gè)備用字體。
讓我們使用Harry的方法來實(shí)現(xiàn)我們的字體：
- <!-- https://fonts.gstatic.com is the font file origin -->
- <!-- It may not have the same origin as the CSS file (https://fonts.googleapis.com) -->
- <link rel="preconnect"
- href="https://fonts.gstatic.com"
- crossorigin />
- <!-- We use the full link to the CSS file in the rest of the tags -->
- <link rel="preload"
- as="style"
- href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" />
- <link rel="stylesheet"
- href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"
- media="print" onload="this.media='all'" />
- <noscript>
- <link rel="stylesheet"
- href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" />
- </noscript>
注意字體樣式鏈接上的media="print"。瀏覽器會(huì)自動(dòng)賦予打印樣式一個(gè)低優(yōu)先級(jí)并將其排除在關(guān)鍵渲染路徑之外。在打印樣式表加載完成后，onload事件將會(huì)被觸發(fā)，媒體將會(huì)切換為一個(gè)默認(rèn)的all值，字體將被應(yīng)用于所有的媒體類型（屏幕、打印和語音）。
Lighthouse很滿意這個(gè)方法！
需要注意的是，自托管字體還可以幫助解決渲染阻塞問題，但這并非適用于所有情況。例如，使用CDN可能是不可避免的。在某些情況下，讓CDN在提供靜態(tài)資源時(shí)承擔(dān)繁重的工作是有益的。
盡管我們現(xiàn)在以最佳的非渲染阻止的方式加載了字體樣式表和字體文件，我們還是引入了一個(gè)小的用戶體驗(yàn)問題……
無樣式文本閃爍(FOUT)
這就是我們說的FOUT：
為什么會(huì)這樣呢？為了去掉阻塞渲染的資源，我們必須在頁面內(nèi)容已渲染（即顯示在屏幕上）之后加載它。對(duì)于在關(guān)鍵資源之后異步加載的低優(yōu)先級(jí)字體樣式表，用戶可能會(huì)看到從備用字體切換為下載完的字體的瞬間。不僅如此，頁面的布局可能會(huì)偏移，導(dǎo)致一些元素在網(wǎng)絡(luò)字體加載完成之前看起來很割裂。
處理FOUT的最好方式是讓備用字體和網(wǎng)絡(luò)字體之間的切換平滑。為此我們要做的有：
- 盡可能選擇一個(gè)與異步加載的字體相似的系統(tǒng)字體。
- 調(diào)整備用字體的樣式（font-size，line-height，letter-spacing等），盡可能地讓異步載入的字體與備用字體特征匹配。
- 在異步加載的字體文件渲染完成后立即清除備用字體的樣式，并應(yīng)用為新載入的字體準(zhǔn)備的樣式風(fēng)格。
我們可以使用字體匹配器找到我們選定并計(jì)劃使用的任何網(wǎng)絡(luò)字體的最佳備用字體和配置。在我們?yōu)閭溆米煮w和網(wǎng)絡(luò)字體準(zhǔn)備好樣式風(fēng)格后，我們可以繼續(xù)下一步。
本例中Merriweather是要使用的字體，Georgia是備用字體。一旦Merriweather的樣式風(fēng)格被應(yīng)用，布局偏移應(yīng)當(dāng)降到最小，并且字體切換不應(yīng)該被察覺。
我們可以使用CSS字體加載API來檢測(cè)Web字體何時(shí)加載。為什么要這樣？Typekit的網(wǎng)絡(luò)字體加載器曾經(jīng)是實(shí)現(xiàn)它的一種比較流行的方法，盡管繼續(xù)使用它或其他類似的庫看起來很誘人，但我們需要考慮以下幾點(diǎn)：
- 它已經(jīng)四年沒有更新了，這意味著，如果插件有任何問題或需要引入新功能，很可能沒有人會(huì)更新與維護(hù)了。
- 我們已經(jīng)使用Harry Roberts的代碼有效地處理了異步加載，不需要依賴JavaScript來加載字體。
如果你問我，使用類似Typekit的庫為這樣的簡單任務(wù)帶來了過多的JavaScript代碼。我想避免使用任何第三方的庫和依賴，因此讓我們自己找到解決方案，并且盡可能地使其簡潔明了，而不會(huì)過度設(shè)計(jì)。
盡管CSS字體加載API被認(rèn)為是實(shí)驗(yàn)性功能，但它已經(jīng)有大約95%的瀏覽器支持了。但無論如何，我們還是要提供備用字體，因?yàn)锳PI可能在將來發(fā)生了改變或被廢棄。丟失字體的風(fēng)險(xiǎn)不值得我們?nèi)ッ啊?/p>
CSS字體加載API可用于動(dòng)態(tài)和異步地加載字體。我們已經(jīng)決定不依賴JavaScript來完成諸如字體加載之類的簡單操作，并且已經(jīng)使用帶有預(yù)加載和預(yù)連接的純HTML的最佳實(shí)踐解決了它。我們將使用API中的一個(gè)函數(shù)，該函數(shù)將幫助我們檢查字體是否已加載并可用。
- document.fonts.check("12px 'Merriweather'");
check()函數(shù)判斷在參數(shù)中指定的字體是否可用并返回true或false。字體大小參數(shù)值對(duì)于我們的用例而言并不重要，可以將其設(shè)置為任何值。不過，我們需要確保：
- 頁面上至少有一個(gè)HTML元素，其中包含至少一個(gè)字符，并已應(yīng)用了網(wǎng)絡(luò)字體的聲明。在示例中，我們將使用 。但任何字符都可以使用，只要它對(duì)于有視力和無視力的用戶都是隱藏的(不使用display: none;)。API跟蹤已應(yīng)用字體樣式的DOM元素。如果頁面上沒有匹配的元素，則API無法確定字體是否已加載。
- 在check()函數(shù)的參數(shù)中指定的字體正是CSS中調(diào)用的字體。
在下面的演示中，我已經(jīng)使用CSS字體加載API實(shí)現(xiàn)了字體加載的監(jiān)聽器。出于演示的目的，加載字體及其監(jiān)聽器將通過點(diǎn)擊模擬頁面加載的按鈕來觸發(fā)，以便您可以看到改變的發(fā)生。在常規(guī)項(xiàng)目中，這應(yīng)該在網(wǎng)站加載和渲染完成后立即進(jìn)行。
那不是很棒嗎？多虧了CSS字體加載API的良好支持，們花了不到30行JavaScript代碼來實(shí)現(xiàn)一個(gè)簡單的字體加載監(jiān)聽器。在此過程中，我們還處理了兩種可能的極端情況：
- API出了點(diǎn)問題，或者發(fā)生了一些阻止網(wǎng)絡(luò)字體加載的錯(cuò)誤。
- 用戶正在關(guān)閉JavaScript功能的情況下瀏覽網(wǎng)站。
現(xiàn)在，我們有了一種檢測(cè)字體文件何時(shí)完成加載的方法，我們需要向備用字體中添加樣式以匹配網(wǎng)絡(luò)字體，并了解如何更有效地處理FOUT。
備用字體和網(wǎng)絡(luò)字體之間的切換看起來很平滑，我們?cè)O(shè)法實(shí)現(xiàn)了不那么明顯的FOUT！在復(fù)雜的站點(diǎn)上，這個(gè)改變將會(huì)帶來少量的布局偏移，依賴內(nèi)容大小的元素也不會(huì)看起來被破壞或者位置不對(duì)。
背后發(fā)生了什么
讓我們從HTML開始仔細(xì)看一下前面示例中的代碼。我們有<head>元素中的代碼片段，它使我們可以通過預(yù)加載、預(yù)連接和存在備用地異步載入字體。
- <body class="no-js">
- <!-- ... Website content ... -->
- <div aria-visibility="hidden" class="hidden" style="font-family: '[web-font-name]'">
- /* There is a non-breaking space here */
- </div>
- <script>
- document.getElementsByTagName("body")[0].classList.remove("no-js");
- </script>
- </body>
注意我們?cè)?lt;body>元素上有一個(gè)硬編碼的.no-js類名，它將在HTML文檔完成加載的時(shí)刻被移除。這會(huì)為禁用JavaScript的用戶呈現(xiàn)網(wǎng)絡(luò)字體的樣式。
其次，還記得CSS字體加載API是如何要求最少包含一個(gè)字符的HTML元素來追蹤字體并應(yīng)用它的樣式的嗎？由于我們無法使用display: none;，我們添加了一個(gè)包含 字符的<div>，以一種有效的方式實(shí)現(xiàn)了對(duì)有視力和無視力的用戶的隱藏。這個(gè)元素有一個(gè)內(nèi)聯(lián)樣式font-family: 'Merriweather'。這使我們能夠在備用的樣式和加載完成的字體樣式之間進(jìn)行平滑切換，并確保所有字體文件被正確追蹤，無論他們是否在頁面上使用。
注意 字符并沒有在代碼塊中出現(xiàn)但它確實(shí)存在！
CSS是最簡單的部分。我們可以利用硬編碼在HTML中的CSS類名或有條件地使用JavaScript處理不同字體的加載狀態(tài)。
- body:not(.wf-merriweather--loaded):not(.no-js) {
- font-family: [fallback-system-font];
- /* Fallback font styles */
- }
- .wf-merriweather--loaded,
- .no-js {
- font-family: "[web-font-name]";
- /* Webfont styles */
- }
- /* Accessible hiding */
- .hidden {
- position: absolute;
- overflow: hidden;
- clip: rect(0 0 0 0);
- height: 1px;
- width: 1px;
- margin: -1px;
- padding: 0;
- border: 0;
- }
JavaScript是神奇的地方。如前所述，我們使用CSS字體加載API的check()函數(shù)檢查字體是否被成功加載。同樣，字體大小的參數(shù)可以是任何值（以像素為單位）；它的font-family屬性值需要與我們載入的字體名稱相同。
- var interval = null;
- function fontLoadListener() {
- var hasLoaded = false;
- try {
- hasLoaded = document.fonts.check('12px "[web-font-name]"')
- } catch(error) {
- console.info("CSS font loading API error", error);
- fontLoadedSuccess();
- return;
- }
- if(hasLoaded) {
- fontLoadedSuccess();
- }
- }
- function fontLoadedSuccess() {
- if(interval) {
- clearInterval(interval);
- }
- /* Apply class names */
- }
- interval = setInterval(fontLoadListener, 500);
這段代碼是我們?cè)谑褂胒ontLoadListener()設(shè)置定期運(yùn)行的監(jiān)聽器。這個(gè)函數(shù)應(yīng)該盡可能簡單，以便在定時(shí)器間隔內(nèi)有效運(yùn)行。我們使用try-catch代碼塊來處理任何錯(cuò)誤并捕獲任何問題，以便在JavaScript錯(cuò)誤的情況下仍然可以使用網(wǎng)絡(luò)字體樣式，使用戶不會(huì)遇到任何界面顯示的問題。
接下來，我們使用fontLoadedSuccess()監(jiān)聽何時(shí)字體加載完成。我們需要確保立即清除定時(shí)器以免在此之后進(jìn)行不必要的字體加載檢查。為了應(yīng)用網(wǎng)絡(luò)字體的風(fēng)格樣式，我們可以在這里添加一些需要的類名。
最后，我們初始化定時(shí)器的周期。在此示例中，我們將其設(shè)置為500ms，因此該函數(shù)每秒運(yùn)行兩次。
這是Gatsby的實(shí)現(xiàn)
與一般的Web開發(fā)（甚至是常規(guī)的create-react-app技術(shù)棧）相比，Gatsby所做的事情有所不同，這使得實(shí)現(xiàn)此處介紹的內(nèi)容有些棘手。
為了簡化這一過程，我們將開發(fā)一個(gè)本地的Gatsby插件，因此在下面的示例中所有與字體加載器相關(guān)的代碼都位于plugins/gatsby-font-loader。
我們的字體加載器代碼和配置將分為三個(gè)主要的Gatsby文件：
- 插件配置（gatsby-config.js）：我們將引入項(xiàng)目中的本地插件，列出所有的本地和外部字體及其屬性（包括字體名稱和CSS文件URL），并引入所有預(yù)連接URL。
- 服務(wù)器端代碼（gatsby-ssr.js）：我們將使用來自Gatsby API的setHeadComponents 函數(shù)根據(jù)配置生成并引入HTML<head>中預(yù)加載和預(yù)連接的標(biāo)簽。然后，我們使用setPostBodyComponents生成隱藏了字體的HTML代碼并將其引入HTML文檔中。
- 客戶端代碼（gatsby-browser.js）：由于此代碼在頁面加載完成以及React啟動(dòng)后運(yùn)行，因此它已經(jīng)是異步的。這意味著我們可以使用react-helmet注入字體樣式表鏈接。我們還將啟動(dòng)字體加載監(jiān)聽器來處理FOUT。
您可以在下面的CodeSandbox示例中檢查Gatsby實(shí)現(xiàn)。
- <iframe
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"
- width="700px" height="500px"
- frameborder="0" scrolling="no"
- src="https://g21lp.sse.codesandbox.io"
- style="opacity: 1; z-index: 1;
- background-color: white; pointer-events: initial;">
- </iframe>
我知道，有些東西很復(fù)雜。如果你只想為實(shí)現(xiàn)性能優(yōu)化，異步加載字體和避免FOUT問題使用簡單的開箱即用的解決方案，我已經(jīng)為此開發(fā)了gatsby-omni-font-loader插件。它使用本文中的代碼，我正在積極維護(hù)它。如果您有任何建議，錯(cuò)誤報(bào)告或代碼貢獻(xiàn)，請(qǐng)隨時(shí)在GitHub上提交。
結(jié)論
內(nèi)容可能是用戶在網(wǎng)站上體驗(yàn)的最重要組成部分。我們需要確保內(nèi)容獲得最高優(yōu)先級(jí)并盡快加載。這意味著在加載過程中盡量減少使用最小表示樣式（即，內(nèi)聯(lián)的關(guān)鍵CSS）。這也就是為什么在大多數(shù)情況下將網(wǎng)絡(luò)字體視為非關(guān)鍵資源的原因——用戶仍然可以在沒有字體的情況下查看內(nèi)容——因此，在頁面渲染完成之后加載它們非常好。
但這可能會(huì)導(dǎo)致FOUT和布局偏移，因此我們需要字體加載監(jiān)聽器來保證備用的系統(tǒng)字體和網(wǎng)絡(luò)字體之間進(jìn)行平滑切換。
我想聽聽你的想法！在評(píng)論中讓我知道您如何處理項(xiàng)目中網(wǎng)絡(luò)字體加載，渲染阻塞的資源和FOUT的問題。
