溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Fonts怎么加載”，在日常操作中，相信很多人在Fonts怎么加載問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Fonts怎么加載”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
使用網絡字體的工作流很簡單，是吧？選擇一些看起來不錯的網絡可用字體，獲取 HTML 或 CSS 代碼段，將其放入項目中，然后檢查它們是否顯示正確。人們每天數以千次地像這樣操作谷歌字體：將它的<link>標簽放入<head>中。
我們來看下Lighthouse是如何評價這樣的工作流的。
Lighthouse
標簽中的樣式表被Lighthouse標記為阻塞渲染的資源，它們竟然讓渲染增加了一秒鐘？這看起來不是很好。
我們已經按照書籍，文檔，HTML標準完成了所有工作，為什么Lighthouse還是會告訴我這樣不對呢？
讓我們來討論下如何讓字體樣式文件成為非渲染阻塞資源，并且探討一種不僅讓Lighthouse滿意，還要解決加載字體時通常會出現糟糕的無樣式文本閃爍(FOUT)問題。我們將使用原生的HTML，CSS和JavaScript來完成這些工作，因此我們可以在任何技術棧中使用它們。另外我們還將介紹下Gatsby的實現以及一個由本人開發的簡單、開箱即用的插件。
瀏覽器加載網頁時，會從DOM（HTML的一個對象模型）和CSSOM（所有css選擇器的映射）中生成渲染樹。渲染樹是關鍵渲染路徑中的一部分，關鍵渲染路徑代表了瀏覽器在渲染頁面中的每個步驟。瀏覽器為了渲染一個頁面，需要加載并解析HTML文檔以及鏈接到該HTML中的每個CSS文件。
下面是一個非常典型的直接從谷歌字體樣式表：
@font-face { font-family: 'Merriweather'; src: local('Merriweather'), url(https://fonts.gstatic.com/...) format('woff2'); }你可能會認為字體樣式的文件體積很小，因為他們通常最多包含一些@font-face定義。因此它們應該不會對頁面渲染造成可以感知的影響，事實是這樣嗎？
假設我們正在從外部CDN服務器加載一個CSS字體文件。當我們的網頁在加載時，瀏覽器需要等待文件從CDN服務器上加載并且載入到渲染樹中。不僅如此，它還需要等待在CSS的@font-face屬性中定義的作為URL值引用的字體文件請求并加載完成。
關鍵點：字體文件成為關鍵渲染路徑的一部分，并且延遲了頁面的渲染。
加載字體樣式表和字體文件時阻塞了關鍵渲染路徑
對于普通用戶來說網站最重要的部分是什么？當然是內容了。因此在頁面加載過程中我們必須盡快將內容呈現給用戶。為此，關鍵渲染路徑必須精簡到只剩下關鍵資源(例如HTML和關鍵的CSS)，其余的內容將在頁面渲染完成后加載，包括字體。
如果一個用戶正在較差的網絡環境下瀏覽未經過優化的頁面，坐在空白的屏幕前等待字體文件和其他關鍵資源載入完成將會使他非常惱火。除非該用戶非常有耐心，否則他很可能會以為是頁面根本沒有開始加載，直接放棄等待，關閉窗口。
然而，如果非關鍵資源的渲染被推遲，內容盡可能快地被呈現了出來，用戶將能夠瀏覽頁面并且忽略任何缺少的表現樣式(比如字體)——當然，如果字體并不是內容的一部分的話。
經過優化的網站盡可能快地渲染包含關鍵CSS的內容，并且延遲非關鍵資源的加載。第二個時間線的0.5s和1.0s之間出現了一個字體的切換，表明了顯示樣式開始渲染的時間。
重復造輪子沒有意義。哈里·羅伯茨（Harry Roberts）已經很好地介紹了一種加載字體的最佳實踐。他通過深入的研究以及來自谷歌字體的數據，將其歸納為四個步驟：
預連接到字體文件的站點。
以低優先級異步預加載字體樣式表。
在內容渲染完成后，使用JavaScript異步加載字體樣式表和字體文件。
為關閉JavaScript的用戶提供一個備用字體。
讓我們使用Harry的方法來實現我們的字體：
<!-- 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"。瀏覽器會自動賦予打印樣式一個低優先級并將其排除在關鍵渲染路徑之外。在打印樣式表加載完成后，onload事件將會被觸發，媒體將會切換為一個默認的all值，字體將被應用于所有的媒體類型（屏幕、打印和語音）。
Lighthouse很滿意這個方法！
需要注意的是，自托管字體還可以幫助解決渲染阻塞問題，但這并非適用于所有情況。例如，使用CDN可能是不可避免的。在某些情況下，讓CDN在提供靜態資源時承擔繁重的工作是有益的。
盡管我們現在以最佳的非渲染阻止的方式加載了字體樣式表和字體文件，我們還是引入了一個小的用戶體驗問題……
這就是我們說的FOUT：
為什么會這樣呢？為了去掉阻塞渲染的資源，我們必須在頁面內容已渲染（即顯示在屏幕上）之后加載它。對于在關鍵資源之后異步加載的低優先級字體樣式表，用戶可能會看到從備用字體切換為下載完的字體的瞬間。不僅如此，頁面的布局可能會偏移，導致一些元素在網絡字體加載完成之前看起來很割裂。
處理FOUT的最好方式是讓備用字體和網絡字體之間的切換平滑。為此我們要做的有：
盡可能選擇一個與異步加載的字體相似的系統字體。
調整備用字體的樣式（font-size，line-height，letter-spacing等），盡可能地讓異步載入的字體與備用字體特征匹配。
在異步加載的字體文件渲染完成后立即清除備用字體的樣式，并應用為新載入的字體準備的樣式風格。
我們可以使用字體匹配器找到我們選定并計劃使用的任何網絡字體的最佳備用字體和配置。在我們為備用字體和網絡字體準備好樣式風格后，我們可以繼續下一步。
本例中Merriweather是要使用的字體，Georgia是備用字體。一旦Merriweather的樣式風格被應用，布局偏移應當降到最小，并且字體切換不應該被察覺。
我們可以使用CSS字體加載API來檢測Web字體何時加載。為什么要這樣？Typekit的網絡字體加載器曾經是實現它的一種比較流行的方法，盡管繼續使用它或其他類似的庫看起來很誘人，但我們需要考慮以下幾點：
它已經四年沒有更新了，這意味著，如果插件有任何問題或需要引入新功能，很可能沒有人會更新與維護了。
我們已經使用Harry Roberts的代碼有效地處理了異步加載，不需要依賴JavaScript來加載字體。
如果你問我，使用類似Typekit的庫為這樣的簡單任務帶來了過多的JavaScript代碼。我想避免使用任何第三方的庫和依賴，因此讓我們自己找到解決方案，并且盡可能地使其簡潔明了，而不會過度設計。
盡管CSS字體加載API被認為是實驗性功能，但它已經有大約95%的瀏覽器支持了。但無論如何，我們還是要提供備用字體，因為API可能在將來發生了改變或被廢棄。丟失字體的風險不值得我們去冒。
CSS字體加載API可用于動態和異步地加載字體。我們已經決定不依賴JavaScript來完成諸如字體加載之類的簡單操作，并且已經使用帶有預加載和預連接的純HTML的最佳實踐解決了它。我們將使用API中的一個函數，該函數將幫助我們檢查字體是否已加載并可用。
document.fonts.check("12px 'Merriweather'");check()函數判斷在參數中指定的字體是否可用并返回true或false。字體大小參數值對于我們的用例而言并不重要，可以將其設置為任何值。不過，我們需要確保：
頁面上至少有一個HTML元素，其中包含至少一個字符，并已應用了網絡字體的聲明。在示例中，我們將使用 。但任何字符都可以使用，只要它對于有視力和無視力的用戶都是隱藏的(不使用display: none;)。API跟蹤已應用字體樣式的DOM元素。如果頁面上沒有匹配的元素，則API無法確定字體是否已加載。
在check()函數的參數中指定的字體正是CSS中調用的字體。
在下面的演示中，我已經使用CSS字體加載API實現了字體加載的監聽器。出于演示的目的，加載字體及其監聽器將通過點擊模擬頁面加載的按鈕來觸發，以便您可以看到改變的發生。在常規項目中，這應該在網站加載和渲染完成后立即進行。
那不是很棒嗎？多虧了CSS字體加載API的良好支持，們花了不到30行JavaScript代碼來實現一個簡單的字體加載監聽器。在此過程中，我們還處理了兩種可能的極端情況：
API出了點問題，或者發生了一些阻止網絡字體加載的錯誤。
用戶正在關閉JavaScript功能的情況下瀏覽網站。
現在，我們有了一種檢測字體文件何時完成加載的方法，我們需要向備用字體中添加樣式以匹配網絡字體，并了解如何更有效地處理FOUT。
備用字體和網絡字體之間的切換看起來很平滑，我們設法實現了不那么明顯的FOUT！在復雜的站點上，這個改變將會帶來少量的布局偏移，依賴內容大小的元素也不會看起來被破壞或者位置不對。
讓我們從HTML開始仔細看一下前面示例中的代碼。我們有<head>元素中的代碼片段，它使我們可以通過預加載、預連接和存在備用地異步載入字體。
<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>注意我們在<body>元素上有一個硬編碼的.no-js類名，它將在HTML文檔完成加載的時刻被移除。這會為禁用JavaScript的用戶呈現網絡字體的樣式。
其次，還記得CSS字體加載API是如何要求最少包含一個字符的HTML元素來追蹤字體并應用它的樣式的嗎？由于我們無法使用display: none;，我們添加了一個包含 字符的<div>，以一種有效的方式實現了對有視力和無視力的用戶的隱藏。這個元素有一個內聯樣式font-family: 'Merriweather'。這使我們能夠在備用的樣式和加載完成的字體樣式之間進行平滑切換，并確保所有字體文件被正確追蹤，無論他們是否在頁面上使用。
注意 字符并沒有在代碼塊中出現但它確實存在！
CSS是最簡單的部分。我們可以利用硬編碼在HTML中的CSS類名或有條件地使用JavaScript處理不同字體的加載狀態。
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()函數檢查字體是否被成功加載。同樣，字體大小的參數可以是任何值（以像素為單位）；它的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);這段代碼是我們在使用fontLoadListener()設置定期運行的監聽器。這個函數應該盡可能簡單，以便在定時器間隔內有效運行。我們使用try-catch代碼塊來處理任何錯誤并捕獲任何問題，以便在JavaScript錯誤的情況下仍然可以使用網絡字體樣式，使用戶不會遇到任何界面顯示的問題。
接下來，我們使用fontLoadedSuccess()監聽何時字體加載完成。我們需要確保立即清除定時器以免在此之后進行不必要的字體加載檢查。為了應用網絡字體的風格樣式，我們可以在這里添加一些需要的類名。
最后，我們初始化定時器的周期。在此示例中，我們將其設置為500ms，因此該函數每秒運行兩次。
與一般的Web開發（甚至是常規的create-react-app技術棧）相比，Gatsby所做的事情有所不同，這使得實現此處介紹的內容有些棘手。
為了簡化這一過程，我們將開發一個本地的Gatsby插件，因此在下面的示例中所有與字體加載器相關的代碼都位于plugins/gatsby-font-loader。
我們的字體加載器代碼和配置將分為三個主要的Gatsby文件：
插件配置（gatsby-config.js）：我們將引入項目中的本地插件，列出所有的本地和外部字體及其屬性（包括字體名稱和CSS文件URL），并引入所有預連接URL。
服務器端代碼（gatsby-ssr.js）：我們將使用來自Gatsby API的setHeadComponents 函數根據配置生成并引入HTML<head>中預加載和預連接的標簽。然后，我們使用setPostBodyComponents生成隱藏了字體的HTML代碼并將其引入HTML文檔中。
客戶端代碼（gatsby-browser.js）：由于此代碼在頁面加載完成以及React啟動后運行，因此它已經是異步的。這意味著我們可以使用react-helmet注入字體樣式表鏈接。我們還將啟動字體加載監聽器來處理FOUT。
您可以在下面的CodeSandbox示例中檢查Gatsby實現。
<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>
我知道，有些東西很復雜。如果你只想為實現性能優化，異步加載字體和避免FOUT問題使用簡單的開箱即用的解決方案，我已經為此開發了gatsby-omni-font-loader插件。它使用本文中的代碼，我正在積極維護它。如果您有任何建議，錯誤報告或代碼貢獻，請隨時在GitHub上提交。
內容可能是用戶在網站上體驗的最重要組成部分。我們需要確保內容獲得最高優先級并盡快加載。這意味著在加載過程中盡量減少使用最小表示樣式（即，內聯的關鍵CSS）。這也就是為什么在大多數情況下將網絡字體視為非關鍵資源的原因——用戶仍然可以在沒有字體的情況下查看內容——因此，在頁面渲染完成之后加載它們非常好。
但這可能會導致FOUT和布局偏移，因此我們需要字體加載監聽器來保證備用的系統字體和網絡字體之間進行平滑切換。
我想聽聽你的想法！在評論中讓我知道您如何處理項目中網絡字體加載，渲染阻塞的資源和FOUT的問題。
到此，關于“Fonts怎么加載”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
