日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
如何優(yōu)雅地加載Fonts

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了騰沖免費(fèi)建站歡迎大家使用！

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

Lighthouse

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

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

讓我們來(lái)討論下如何讓字體樣式文件成為非渲染阻塞資源，并且探討一種不僅讓Lighthouse滿(mǎn)意，還要解決加載字體時(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選擇器的映射）中生成渲染樹(shù)。渲染樹(shù)是關(guān)鍵渲染路徑中的一部分，關(guān)鍵渲染路徑代表了瀏覽器在渲染頁(yè)面中的每個(gè)步驟。瀏覽器為了渲染一個(gè)頁(yè)面，需要加載并解析HTML文檔以及鏈接到該HTML中的每個(gè)CSS文件。

下面是一個(gè)非常典型的直接從谷歌字體樣式表：

 
 
 
 
      
  
  
  
  1. @font-face {  
    2.   
  
  
  
  2.   font-family: 'Merriweather';  
    3.   
  
  
  
  3.   src: local('Merriweather'), url(https://fonts.gstatic.com/...) format('woff2');  
    4.   
  
  
  
  4. } 
    5.

你可能會(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ù)器上加載并且載入到渲染樹(shù)中。不僅如此，它還需要等待在CSS的@font-face屬性中定義的作為URL值引用的字體文件請(qǐng)求并加載完成。

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

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

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

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

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

經(jīng)過(guò)優(yōu)化的網(wǎng)站盡可能快地渲染包含關(guān)鍵CSS的內(nèi)容，并且延遲非關(guān)鍵資源的加載。第二個(gè)時(shí)間線(xiàn)的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的用戶(hù)提供一個(gè)備用字體。

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

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3.   
  
  
  
  4.         
    5.   
  
  
  
  5.       crossorigin />  
    6.   
  
  
  
  6.   
    7.   
  
  
  
  7.   
  
  
  
  8.       as="style"  
    9.   
  
  
  
  9.        />  
    10.   
  
  
  
  10.   
  
  
  
  11.         
    12.   
  
  
  
  12.       media="print" onload="this.media='all'" />  
    13.   
  
  
  
  13.  
    14.

注意字體樣式鏈接上的media="print"。瀏覽器會(huì)自動(dòng)賦予打印樣式一個(gè)低優(yōu)先級(jí)并將其排除在關(guān)鍵渲染路徑之外。在打印樣式表加載完成后，onload事件將會(huì)被觸發(fā)，媒體將會(huì)切換為一個(gè)默認(rèn)的all值，字體將被應(yīng)用于所有的媒體類(lèi)型（屏幕、打印和語(yǔ)音）。

Lighthouse很滿(mǎn)意這個(gè)方法！

需要注意的是，自托管字體還可以幫助解決渲染阻塞問(wèn)題，但這并非適用于所有情況。例如，使用CDN可能是不可避免的。在某些情況下，讓CDN在提供靜態(tài)資源時(shí)承擔(dān)繁重的工作是有益的。

盡管我們現(xiàn)在以最佳的非渲染阻止的方式加載了字體樣式表和字體文件，我們還是引入了一個(gè)小的用戶(hù)體驗(yàn)問(wèn)題……

無(wú)樣式文本閃爍(FOUT)

這就是我們說(shuō)的FOUT：

為什么會(huì)這樣呢？為了去掉阻塞渲染的資源，我們必須在頁(yè)面內(nèi)容已渲染（即顯示在屏幕上）之后加載它。對(duì)于在關(guān)鍵資源之后異步加載的低優(yōu)先級(jí)字體樣式表，用戶(hù)可能會(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ù)使用它或其他類(lèi)似的庫(kù)看起來(lái)很誘人，但我們需要考慮以下幾點(diǎn)：

  •  它已經(jīng)四年沒(méi)有更新了，這意味著，如果插件有任何問(wèn)題或需要引入新功能，很可能沒(méi)有人會(huì)更新與維護(hù)了。
  •  我們已經(jīng)使用Harry Roberts的代碼有效地處理了異步加載，不需要依賴(lài)JavaScript來(lái)加載字體。

如果你問(wèn)我，使用類(lèi)似Typekit的庫(kù)為這樣的簡(jiǎn)單任務(wù)帶來(lái)了過(guò)多的JavaScript代碼。我想避免使用任何第三方的庫(kù)和依賴(lài)，因此讓我們自己找到解決方案，并且盡可能地使其簡(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)決定不依賴(lài)JavaScript來(lái)完成諸如字體加載之類(lèi)的簡(jiǎn)單操作，并且已經(jīng)使用帶有預(yù)加載和預(yù)連接的純HTML的最佳實(shí)踐解決了它。我們將使用API中的一個(gè)函數(shù)，該函數(shù)將幫助我們檢查字體是否已加載并可用。

 
 
 
 
      
  
  
  
  1. document.fonts.check("12px 'Merriweather'"); 
    2.

check()函數(shù)判斷在參數(shù)中指定的字體是否可用并返回true或false。字體大小參數(shù)值對(duì)于我們的用例而言并不重要，可以將其設(shè)置為任何值。不過(guò)，我們需要確保：

  •  頁(yè)面上至少有一個(gè)HTML元素，其中包含至少一個(gè)字符，并已應(yīng)用了網(wǎng)絡(luò)字體的聲明。在示例中，我們將使用 。但任何字符都可以使用，只要它對(duì)于有視力和無(wú)視力的用戶(hù)都是隱藏的(不使用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ò)誤。
  •  用戶(hù)正在關(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)少量的布局偏移，依賴(lài)內(nèi)容大小的元素也不會(huì)看起來(lái)被破壞或者位置不對(duì)。

背后發(fā)生了什么

讓我們從HTML開(kāi)始仔細(xì)看一下前面示例中的代碼。我們有元素中的代碼片段，它使我們可以通過(guò)預(yù)加載、預(yù)連接和存在備用地異步載入字體。

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.     
    3.   
  
  
  
  3.     
    4.   
  
  
  
  4.       /* There is a non-breaking space here */  
    5.   
  
  
  
  5.   
  
  •     
  •  

    • 注意我們?cè)?body>元素上有一個(gè)硬編碼的.no-js類(lèi)名，它將在HTML文檔完成加載的時(shí)刻被移除。這會(huì)為禁用JavaScript的用戶(hù)呈現(xiàn)網(wǎng)絡(luò)字體的樣式。

    其次，還記得CSS字體加載API是如何要求最少包含一個(gè)字符的HTML元素來(lái)追蹤字體并應(yīng)用它的樣式的嗎？由于我們無(wú)法使用display: none;，我們添加了一個(gè)包含 字符的

    ，以一種有效的方式實(shí)現(xiàn)了對(duì)有視力和無(wú)視力的用戶(hù)的隱藏。這個(gè)元素有一個(gè)內(nèi)聯(lián)樣式font-family: 'Merriweather'。這使我們能夠在備用的樣式和加載完成的字體樣式之間進(jìn)行平滑切換，并確保所有字體文件被正確追蹤，無(wú)論他們是否在頁(yè)面上使用。

    注意 字符并沒(méi)有在代碼塊中出現(xiàn)但它確實(shí)存在！

    CSS是最簡(jiǎn)單的部分。我們可以利用硬編碼在HTML中的CSS類(lèi)名或有條件地使用JavaScript處理不同字體的加載狀態(tài)。

     
 
 
 
        
  
  
  
    1. body:not(.wf-merriweather--loaded):not(.no-js) {  
      2.   
  
  
  
    2.   font-family: [fallback-system-font];  
      3.   
  
  
  
    3.   /* Fallback font styles */  
      4.   
  
  
  
    4. }  
      5.   
  
  
  
    5. .wf-merriweather--loaded, 
      6.   
  
  
  
    6.  .no-js {  
      7.   
  
  
  
    7.   font-family: "[web-font-name]";  
      8.   
  
  
  
    8.   /* Webfont styles */  
      9.   
  
  
  
    9. }  
      10.   
  
  
  
    10. /* Accessible hiding */  
      11.   
  
  
  
    11. .hidden {  
      12.   
  
  
  
    12.   position: absolute;   
      13.   
  
  
  
    13.   overflow: hidden;   
      14.   
  
  
  
    14.   clip: rect(0 0 0 0);   
      15.   
  
  
  
    15.   height: 1px;  
      16.   
  
  
  
    16.   width: 1px;   
      17.   
  
  
  
    17.   margin: -1px;  
      18.   
  
  
  
    18.   padding: 0;  
      19.   
  
  
  
    19.   border: 0;   
      20.   
  
  
  
    20. } 
      21.

    JavaScript是神奇的地方。如前所述，我們使用CSS字體加載API的check()函數(shù)檢查字體是否被成功加載。同樣，字體大小的參數(shù)可以是任何值（以像素為單位）；它的font-family屬性值需要與我們載入的字體名稱(chēng)相同。

     
 
 
 
        
  
  
  
    1. var interval = null;  
      2.   
  
  
  
    2. function fontLoadListener() {  
      3.   
  
  
  
    3.   var hasLoaded = false;  
      4.   
  
  
  
    4.   try {  
      5.   
  
  
  
    5.     hasLoaded = document.fonts.check('12px "[web-font-name]"')  
      6.   
  
  
  
    6.   } catch(error) {  
      7.   
  
  
  
    7.     console.info("CSS font loading API error", error);  
      8.   
  
  
  
    8.     fontLoadedSuccess();  
      9.   
  
  
  
    9.     return; 
      10.   
  
  
  
    10.   } 
      11.   
  
  
  
    11.   if(hasLoaded) { 
      12.   
  
  
  
    12.     fontLoadedSuccess();  
      13.   
  
  
  
    13.   }  
      14.   
  
  
  
    14. }   
      15.   
  
  
  
    15. function fontLoadedSuccess() {  
      16.   
  
  
  
    16.   if(interval) {  
      17.   
  
  
  
    17.     clearInterval(interval);  
      18.   
  
  
  
    18.   }  
      19.   
  
  
  
    19.   /* Apply class names */  
      20.   
  
  
  
    20. }  
      21.   
  
  
  
    21. interval = setInterval(fontLoadListener, 500); 
      22.

    這段代碼是我們?cè)谑褂胒ontLoadListener()設(shè)置定期運(yùn)行的監(jiān)聽(tīng)器。這個(gè)函數(shù)應(yīng)該盡可能簡(jiǎn)單，以便在定時(shí)器間隔內(nèi)有效運(yùn)行。我們使用try-catch代碼塊來(lái)處理任何錯(cuò)誤并捕獲任何問(wèn)題，以便在JavaScript錯(cuò)誤的情況下仍然可以使用網(wǎng)絡(luò)字體樣式，使用戶(hù)不會(huì)遇到任何界面顯示的問(wèn)題。

    接下來(lái)，我們使用fontLoadedSuccess()監(jiān)聽(tīng)何時(shí)字體加載完成。我們需要確保立即清除定時(shí)器以免在此之后進(jìn)行不必要的字體加載檢查。為了應(yīng)用網(wǎng)絡(luò)字體的風(fēng)格樣式，我們可以在這里添加一些需要的類(lèi)名。

    最后，我們初始化定時(shí)器的周期。在此示例中，我們將其設(shè)置為500ms，因此該函數(shù)每秒運(yùn)行兩次。

    這是Gatsby的實(shí)現(xiàn)

    與一般的Web開(kāi)發(fā)（甚至是常規(guī)的create-react-app技術(shù)棧）相比，Gatsby所做的事情有所不同，這使得實(shí)現(xiàn)此處介紹的內(nèi)容有些棘手。

    為了簡(jiǎn)化這一過(guò)程，我們將開(kāi)發(fā)一個(gè)本地的Gatsby插件，因此在下面的示例中所有與字體加載器相關(guān)的代碼都位于plugins/gatsby-font-loader。

    我們的字體加載器代碼和配置將分為三個(gè)主要的Gatsby文件：

    •  插件配置（gatsby-config.js）：我們將引入項(xiàng)目中的本地插件，列出所有的本地和外部字體及其屬性（包括字體名稱(chēng)和CSS文件URL），并引入所有預(yù)連接URL。
    •  服務(wù)器端代碼（gatsby-ssr.js）：我們將使用來(lái)自Gatsby API的setHeadComponents 函數(shù)根據(jù)配置生成并引入HTML中預(yù)加載和預(yù)連接的標(biāo)簽。然后，我們使用setPostBodyComponents生成隱藏了字體的HTML代碼并將其引入HTML文檔中。
    •  客戶(hù)端代碼（gatsby-browser.js）：由于此代碼在頁(yè)面加載完成以及React啟動(dòng)后運(yùn)行，因此它已經(jīng)是異步的。這意味著我們可以使用react-helmet注入字體樣式表鏈接。我們還將啟動(dòng)字體加載監(jiān)聽(tīng)器來(lái)處理FOUT。

    您可以在下面的CodeSandbox示例中檢查Gatsby實(shí)現(xiàn)。

     
 
 
 
        
  
  
  
    1.   
  
  
  
    2. allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"  
      3.   
  
  
  
    3. sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"   
      4.   
  
  
  
    4. width="700px" height="500px"   
      5.   
  
  
  
    5. frameborder="0" scrolling="no"  
      6.   
  
  
  
    6. src="https://g21lp.sse.codesandbox.io"   
      7.   
  
  
  
    7. style="opacity: 1; z-index: 1;   
      8.   
  
  
  
    8. background-color: white; pointer-events: initial;">   
      9.   
  
  
  
    9.  
      10.

    我知道，有些東西很復(fù)雜。如果你只想為實(shí)現(xiàn)性能優(yōu)化，異步加載字體和避免FOUT問(wèn)題使用簡(jiǎn)單的開(kāi)箱即用的解決方案，我已經(jīng)為此開(kāi)發(fā)了gatsby-omni-font-loader插件。它使用本文中的代碼，我正在積極維護(hù)它。如果您有任何建議，錯(cuò)誤報(bào)告或代碼貢獻(xiàn)，請(qǐng)隨時(shí)在GitHub上提交。

    結(jié)論

    內(nèi)容可能是用戶(hù)在網(wǎng)站上體驗(yàn)的最重要組成部分。我們需要確保內(nèi)容獲得最高優(yōu)先級(jí)并盡快加載。這意味著在加載過(guò)程中盡量減少使用最小表示樣式（即，內(nèi)聯(lián)的關(guān)鍵CSS）。這也就是為什么在大多數(shù)情況下將網(wǎng)絡(luò)字體視為非關(guān)鍵資源的原因——用戶(hù)仍然可以在沒(méi)有字體的情況下查看內(nèi)容——因此，在頁(yè)面渲染完成之后加載它們非常好。

    但這可能會(huì)導(dǎo)致FOUT和布局偏移，因此我們需要字體加載監(jiān)聽(tīng)器來(lái)保證備用的系統(tǒng)字體和網(wǎng)絡(luò)字體之間進(jìn)行平滑切換。

    我想聽(tīng)聽(tīng)你的想法！在評(píng)論中讓我知道您如何處理項(xiàng)目中網(wǎng)絡(luò)字體加載，渲染阻塞的資源和FOUT的問(wèn)題。


    名稱(chēng)欄目：如何優(yōu)雅地加載Fonts
    網(wǎng)頁(yè)鏈接：http://m.5511xx.com/article/cciehed.html