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