Fonts怎么加載

這篇文章主要介紹“Fonts怎么加載”，在日常操作中，相信很多人在Fonts怎么加載問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Fonts怎么加載”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),成華網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:成華等地區(qū)。成華做網(wǎng)站價(jià)格咨詢:18980820575

使用網(wǎng)絡(luò)字體的工作流很簡(jiǎn)單，是吧？選擇一些看起來(lái)不錯(cuò)的網(wǎng)絡(luò)可用字體，獲取 HTML 或 CSS 代碼段，將其放入項(xiàng)目中，然后檢查它們是否顯示正確。人們每天數(shù)以千次地像這樣操作谷歌字體：將它的標(biāo)簽放入中。

我們來(lái)看下Lighthouse是如何評(píng)價(jià)這樣的工作流的。

Lighthouse

標(biāo)簽中的樣式表被Lighthouse標(biāo)記為阻塞渲染的資源，它們竟然讓渲染增加了一秒鐘？這看起來(lái)不是很好。

我們已經(jīng)按照書籍，文檔，HTML標(biāo)準(zhǔn)完成了所有工作，為什么Lighthouse還是會(huì)告訴我這樣不對(duì)呢？

讓我們來(lái)討論下如何讓字體樣式文件成為非渲染阻塞資源，并且探討一種不僅讓Lighthouse滿意，還要解決加載字體時(shí)通常會(huì)出現(xiàn)糟糕的無(wú)樣式文本閃爍(FOUT)問(wèn)題。我們將使用原生的HTML，CSS和JavaScript來(lái)完成這些工作，因此我們可以在任何技術(shù)棧中使用它們。另外我們還將介紹下Gatsby的實(shí)現(xiàn)以及一個(gè)由本人開(kāi)發(fā)的簡(jiǎn)單、開(kāi)箱即用的插件。

什么是渲染阻塞字體

瀏覽器加載網(wǎng)頁(yè)時(shí)，會(huì)從DOM（HTML的一個(gè)對(duì)象模型）和CSSOM（所有css選擇器的映射）中生成渲染樹。渲染樹是關(guān)鍵渲染路徑中的一部分，關(guān)鍵渲染路徑代表了瀏覽器在渲染頁(yè)面中的每個(gè)步驟。瀏覽器為了渲染一個(gè)頁(yè)面，需要加載并解析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ì)頁(yè)面渲染造成可以感知的影響，事實(shí)是這樣嗎？

假設(shè)我們正在從外部cdn服務(wù)器加載一個(gè)CSS字體文件。當(dāng)我們的網(wǎng)頁(yè)在加載時(shí)，瀏覽器需要等待文件從CDN服務(wù)器上加載并且載入到渲染樹中。不僅如此，它還需要等待在CSS的@font-face屬性中定義的作為URL值引用的字體文件請(qǐng)求并加載完成。

關(guān)鍵點(diǎn)：字體文件成為關(guān)鍵渲染路徑的一部分，并且延遲了頁(yè)面的渲染。

加載字體樣式表和字體文件時(shí)阻塞了關(guān)鍵渲染路徑

對(duì)于普通用戶來(lái)說(shuō)網(wǎng)站最重要的部分是什么？當(dāng)然是內(nèi)容了。因此在頁(yè)面加載過(guò)程中我們必須盡快將內(nèi)容呈現(xiàn)給用戶。為此，關(guān)鍵渲染路徑必須精簡(jiǎn)到只剩下關(guān)鍵資源(例如HTML和關(guān)鍵的CSS)，其余的內(nèi)容將在頁(yè)面渲染完成后加載，包括字體。

如果一個(gè)用戶正在較差的網(wǎng)絡(luò)環(huán)境下瀏覽未經(jīng)過(guò)優(yōu)化的頁(yè)面，坐在空白的屏幕前等待字體文件和其他關(guān)鍵資源載入完成將會(huì)使他非常惱火。除非該用戶非常有耐心，否則他很可能會(huì)以為是頁(yè)面根本沒(méi)有開(kāi)始加載，直接放棄等待，關(guān)閉窗口。

然而，如果非關(guān)鍵資源的渲染被推遲，內(nèi)容盡可能快地被呈現(xiàn)了出來(lái)，用戶將能夠?yàn)g覽頁(yè)面并且忽略任何缺少的表現(xiàn)樣式(比如字體)——當(dāng)然，如果字體并不是內(nèi)容的一部分的話。

經(jīng)過(guò)優(yōu)化的網(wǎng)站盡可能快地渲染包含關(guān)鍵CSS的內(nèi)容，并且延遲非關(guān)鍵資源的加載。第二個(gè)時(shí)間線的0.5s和1.0s之間出現(xiàn)了一個(gè)字體的切換，表明了顯示樣式開(kāi)始渲染的時(shí)間。

載入字體的最佳實(shí)踐

重復(fù)造輪子沒(méi)有意義。哈里·羅伯茨（Harry Roberts）已經(jīng)很好地介紹了一種加載字體的最佳實(shí)踐。他通過(guò)深入的研究以及來(lái)自谷歌字體的數(shù)據(jù)，將其歸納為四個(gè)步驟：

•  預(yù)連接到字體文件的站點(diǎn)。

•  以低優(yōu)先級(jí)異步預(yù)加載字體樣式表。

•  在內(nèi)容渲染完成后，使用JavaScript異步加載字體樣式表和字體文件。

•  為關(guān)閉JavaScript的用戶提供一個(gè)備用字體。

讓我們使用Harry的方法來(lái)實(shí)現(xiàn)我們的字體：

    
Lighthouse很滿意這個(gè)方法！
需要注意的是，自托管字體還可以幫助解決渲染阻塞問(wèn)題，但這并非適用于所有情況。例如，使用CDN可能是不可避免的。在某些情況下，讓CDN在提供靜態(tài)資源時(shí)承擔(dān)繁重的工作是有益的。
盡管我們現(xiàn)在以最佳的非渲染阻止的方式加載了字體樣式表和字體文件，我們還是引入了一個(gè)小的用戶體驗(yàn)問(wèn)題……
無(wú)樣式文本閃爍(FOUT)
這就是我們說(shuō)的FOUT：
為什么會(huì)這樣呢？為了去掉阻塞渲染的資源，我們必須在頁(yè)面內(nèi)容已渲染（即顯示在屏幕上）之后加載它。對(duì)于在關(guān)鍵資源之后異步加載的低優(yōu)先級(jí)字體樣式表，用戶可能會(huì)看到從備用字體切換為下載完的字體的瞬間。不僅如此，頁(yè)面的布局可能會(huì)偏移，導(dǎo)致一些元素在網(wǎng)絡(luò)字體加載完成之前看起來(lái)很割裂。
處理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)該被察覺(jué)。
我們可以使用CSS字體加載API來(lái)檢測(cè)Web字體何時(shí)加載。為什么要這樣？Typekit的網(wǎng)絡(luò)字體加載器曾經(jīng)是實(shí)現(xiàn)它的一種比較流行的方法，盡管繼續(xù)使用它或其他類似的庫(kù)看起來(lái)很誘人，但我們需要考慮以下幾點(diǎn)：
 它已經(jīng)四年沒(méi)有更新了，這意味著，如果插件有任何問(wèn)題或需要引入新功能，很可能沒(méi)有人會(huì)更新與維護(hù)了。
 我們已經(jīng)使用Harry Roberts的代碼有效地處理了異步加載，不需要依賴JavaScript來(lái)加載字體。
如果你問(wèn)我，使用類似Typekit的庫(kù)為這樣的簡(jiǎn)單任務(wù)帶來(lái)了過(guò)多的JavaScript代碼。我想避免使用任何第三方的庫(kù)和依賴，因此讓我們自己找到解決方案，并且盡可能地使其簡(jiǎn)潔明了，而不會(huì)過(guò)度設(shè)計(jì)。
盡管CSS字體加載API被認(rèn)為是實(shí)驗(yàn)性功能，但它已經(jīng)有大約95%的瀏覽器支持了。但無(wú)論如何，我們還是要提供備用字體，因?yàn)锳PI可能在將來(lái)發(fā)生了改變或被廢棄。丟失字體的風(fēng)險(xiǎn)不值得我們?nèi)ッ啊?/p>
CSS字體加載API可用于動(dòng)態(tài)和異步地加載字體。我們已經(jīng)決定不依賴JavaScript來(lái)完成諸如字體加載之類的簡(jiǎn)單操作，并且已經(jīng)使用帶有預(yù)加載和預(yù)連接的純HTML的最佳實(shí)踐解決了它。我們將使用API中的一個(gè)函數(shù)，該函數(shù)將幫助我們檢查字體是否已加載并可用。
document.fonts.check("12px 'Merriweather'");
check()函數(shù)判斷在參數(shù)中指定的字體是否可用并返回true或false。字體大小參數(shù)值對(duì)于我們的用例而言并不重要，可以將其設(shè)置為任何值。不過(guò)，我們需要確保：
 頁(yè)面上至少有一個(gè)HTML元素，其中包含至少一個(gè)字符，并已應(yīng)用了網(wǎng)絡(luò)字體的聲明。在示例中，我們將使用 。但任何字符都可以使用，只要它對(duì)于有視力和無(wú)視力的用戶都是隱藏的(不使用display: none;)。API跟蹤已應(yīng)用字體樣式的DOM元素。如果頁(yè)面上沒(méi)有匹配的元素，則API無(wú)法確定字體是否已加載。
 在check()函數(shù)的參數(shù)中指定的字體正是CSS中調(diào)用的字體。
在下面的演示中，我已經(jīng)使用CSS字體加載API實(shí)現(xiàn)了字體加載的監(jiān)聽(tīng)器。出于演示的目的，加載字體及其監(jiān)聽(tīng)器將通過(guò)點(diǎn)擊模擬頁(yè)面加載的按鈕來(lái)觸發(fā)，以便您可以看到改變的發(fā)生。在常規(guī)項(xiàng)目中，這應(yīng)該在網(wǎng)站加載和渲染完成后立即進(jìn)行。
那不是很棒嗎？多虧了CSS字體加載API的良好支持，們花了不到30行JavaScript代碼來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的字體加載監(jiān)聽(tīng)器。在此過(guò)程中，我們還處理了兩種可能的極端情況：
 API出了點(diǎn)問(wèn)題，或者發(fā)生了一些阻止網(wǎng)絡(luò)字體加載的錯(cuò)誤。
 用戶正在關(guān)閉JavaScript功能的情況下瀏覽網(wǎng)站。
現(xiàn)在，我們有了一種檢測(cè)字體文件何時(shí)完成加載的方法，我們需要向備用字體中添加樣式以匹配網(wǎng)絡(luò)字體，并了解如何更有效地處理FOUT。
備用字體和網(wǎng)絡(luò)字體之間的切換看起來(lái)很平滑，我們?cè)O(shè)法實(shí)現(xiàn)了不那么明顯的FOUT！在復(fù)雜的站點(diǎn)上，這個(gè)改變將會(huì)帶來(lái)少量的布局偏移，依賴內(nèi)容大小的元素也不會(huì)看起來(lái)被破壞或者位置不對(duì)。
背后發(fā)生了什么
讓我們從HTML開(kāi)始仔細(xì)看一下前面示例中的代碼。我們有元素中的代碼片段，它使我們可以通過(guò)預(yù)加載、預(yù)連接和存在備用地異步載入字體。
                /* There is a non-breaking space here */