字体会导致性能问题

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的速度提示。