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

解釋了渲染障礙字體

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

典型的Google字體樣式表看起來(lái)像這樣：

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

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

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

最佳字體加載

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

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

執(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)先級(jí)，將其排除在關(guān)鍵渲染路徑之外。加載後， onload將媒體切換到all 。自託管字體也可以提供幫助，但是CDN通常仍然是必要的。

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

解決福特

Fout是從後備到Web字體的可見(jiàn)轉(zhuǎn)變。緩解措施涉及：

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

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

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

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

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

實(shí)施詳細(xì)信息

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

蓋茨比實(shí)施

蓋茨比插件簡(jiǎn)化了此過(guò)程，將配置（ gatsby-config.js ），服務(wù)器端代碼（ gatsby-ssr.js ）和客戶(hù)端代碼（ gatsby-browser.js ）分開(kāi)。該插件管理預(yù)加載，預(yù)連接標(biāo)籤，隱藏的字體元素和字體加載偵聽(tīng)器。

可以輕鬆集成的預(yù)構(gòu)建的gatsby-omni-font-loader插件。

結(jié)論

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