Web字體實現(xiàn)似乎很簡單：選擇字體，獲取代碼，集成和驗證顯示。許多人每天使用Google字體，只需添加其<link>標籤。但是，燈塔經(jīng)常將其標記為有問題。為什麼？讓我們探索消除渲染字體樣式表並創(chuàng)建一個最佳設置，以使燈塔取悅燈塔，同時又可以防止可怕的未風格文本（FOUT）。我們將僅使用HTML，CSS和JavaScript來實現(xiàn)廣泛的適用性。

解釋了渲染障礙字體

瀏覽器網(wǎng)站加載涉及從DOM（HTML對像模型）和CSSOM（CSS選擇器映射）創(chuàng)建渲染樹。這是關鍵渲染路徑的一部分。瀏覽器需要加載和解析HTML和所有鏈接的CSS文件。

典型的Google字體樣式表看起來像這樣：

 <code>@font-face { font-family: 'Merriweather'; src: local('Merriweather'), url(https://fonts.gstatic.com/...) format('woff2'); }</code>

雖然看似很小，但這些樣式表，尤其是從外部CDN加載時會導致延遲。瀏覽器必須等待樣式表，然後將引用的字體文件加載，從而延長渲染時間。這使得字體文件部分是關鍵渲染路徑的一部分。

內(nèi)容至關重要。為了確定優(yōu)先級，將關鍵的渲染路徑最小化（HTML和關鍵CSS），將包括字體在內(nèi)的其他所有內(nèi)容（包括字體）推遲到渲染後。這樣可以防止用戶在等待字體加載時遇到令人沮喪的空白屏幕。

最佳字體加載

哈里·羅伯茨（Harry Roberts）的方法很棒：

1. 前連接：到字體來源。
2. 預緊力：樣式表異步，優(yōu)先級低。
3. 異步加載：使用JavaScript呈現(xiàn)內(nèi)容後，加載樣式表和字體文件。
4. 後備字體：用於禁用JavaScript的用戶。

執(zhí)行：

<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link as="style" href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="preload">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" media="print" onload="this.media='all'" rel="stylesheet">

media="print"屬性給出了樣式表的低優(yōu)先級，將其排除在關鍵渲染路徑之外。加載後， onload將媒體切換到all 。自託管字體也可以提供幫助，但是CDN通常仍然是必要的。

但是，這種優(yōu)化引入了Fout。

解決福特

Fout是從後備到Web字體的可見轉變。緩解措施涉及：

1. 合適的後備字體：與Web字體緊密匹配。
2. 匹配樣式：調(diào)整後備字體樣式（大小，線路高等）以匹配Web字體。
3. 樣式清除：一旦Web字體加載並應用Web字體樣式，就可以刪除後備樣式。

CSS字體加載API有助於檢測Web字體加載。儘管存在Typekit加載器之類的庫，但鑑於我們有效的異步加載，它們已經(jīng)過時且不必要。 API的check()函數(shù)確定字體可用性：

 document.fonts.check（“ 12px'Merriweather'”）;

確保存在具有Web字體聲明的HTML元素（甚至隱藏）供API跟蹤。 check()中的字體名稱必須匹配CSS聲明。

使用此API的簡單偵聽器在字體之間平穩(wěn)過渡，從而最大程度地減少了Fout。錯誤處理和JavaScript可分配的後備至關重要。

實施詳細信息

HTML包括一個隱藏<div>使用Web字體應用，對於API跟蹤至關重要。 CSS使用類來管理selflack和Web字體的樣式。 JavaScript使用<code>setInterval通過API定期檢查字體加載，應用適當?shù)臉邮絹K在加載後清除間隔。錯誤處理可確保在API問題的情況下應用後備樣式。

蓋茨比實施

蓋茨比插件簡化了此過程，將配置（ gatsby-config.js ），服務器端代碼（ gatsby-ssr.js ）和客戶端代碼（ gatsby-browser.js ）分開。該插件管理預加載，預連接標籤，隱藏的字體元素和字體加載偵聽器。

可以輕鬆集成的預構建的gatsby-omni-font-loader插件。

結論

優(yōu)先考慮內(nèi)容是關鍵。異步字體加載，與字體加載偵聽器和精心選擇的後備字體相結合，確保了光滑的用戶體驗，消除了渲染障礙物問題並最大程度地減少了Fout?？紤]使用預構建的插件以在Gatsby中進行更簡單的實現(xiàn)。