字體會導致性能問題

Question

當我的站點加載時，瀏覽器顯示用字體表示的文本（立即顯示帶有宋體字體的文本）之前幾秒鐘會凍結。

我一直在接受來自用戶的投訴，體驗凍結時間長達10秒。

我該怎麼辦？

這裏是我如何插入字體：

@font-face{ 
    font-family:'GillSans'; 
    src:url('../fonts/GIL_____.eot'); 
    src:url('../fonts/GIL_____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GIL_____.woff') format('woff'), 
     url('../fonts/GIL_____.ttf') format('truetype'), 
     url('../fonts/GIL_____.svg#GillSans') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansB'; 
    src:url('../fonts/GILB____.eot'); 
    src:url('../fonts/GILB____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILB____.woff') format('woff'), 
     url('../fonts/GILB____.ttf') format('truetype'), 
     url('../fonts/GILB____.svg#GillSansB') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansBI'; 
    src:url('../fonts/GILBI___.eot'); 
    src:url('../fonts/GILBI___.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILBI___.woff') format('woff'), 
     url('../fonts/GILBI___.ttf') format('truetype'), 
     url('../fonts/GILBI___.svg#GillSansBI') format('svg'); 
} 
@font-face{ 
    font-family:'GillSansI'; 
    src:url('../fonts/GILI____.eot'); 
    src:url('../fonts/GILI____.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/GILI____.woff') format('woff'), 
     url('../fonts/GILI____.ttf') format('truetype'), 
     url('../fonts/GILI____.svg#GillSansI') format('svg'); 
} 

Answer 1

儘量壓縮和緩存的字體。如果您使用Apache，您可以使用.htaccess文件

下面是從性能專家史蒂夫海灣

附加信息和資源

非常helpful overview假設你使用Apache和模塊配置此mod_expires和mod_deflate啓用後，您可以添加以下規則，以你的.htaccess

<IfModule mod_expires.c> 
    Header set cache-control: public 
    ExpiresActive on 

    ExpiresByType font/ttf  "access plus 1 month" 
    ExpiresByType font/woff  "access plus 1 month" 
    ExpiresByType image/svg+xml "access plus 1 month" 
</IfModule> 

<IfModule mod_deflate.c> 
    <FilesMatch "\.(ttf|otf|eot|svg)$" > 
    SetOutputFilter DEFLATE 
    </FilesMatch> 
</IfModule> 

添加ABO後一直到.htaccess，觀察相關的頭域來驗證。

如果您有興趣瞭解更多信息，請查看cache control和compression的速度提示。