字体会导致性能问题 [英] font face causes performance issues

问题描述

当我的网站加载时，浏览器显示以字体呈现的文本（具有立体字体的文本立即显示）之前，会冻结几秒钟。

我收到了冻结达10秒钟的用户的投诉。

 
 $ c> @ 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 'wff'），
 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 'wff'），
 url（'../ fonts / GILI ____。ttf'）format（'truetype'），
 url（'../ fonts / GILI ____。svg＃GillSansI'）format 'svg'）; 
} 
  

解决方案

尝试压缩和缓存您的字体。如果您使用Apache，您可以使用.htaccess

配置此处。实用概述来自效果大师Steve Sounders

信息和资源

假设您使用Apache和模块 mod_expires 和 mod_deflate 已启用，您可以将以下规则添加到您的.htaccess

 < IfModule mod_expires.c> 
头设置cache-control：public 
 ExpiresActive on 
 
 ExpiresByType字体/ ttf访问加1个月
 ExpiresByType字体/ woff访问加1个月
 ExpiresByType image / svg + xmlaccess plus 1 month
< / IfModule> 
 
< IfModule mod_deflate.c> 
< FilesMatch\。（ttf | otf | eot | svg）$> 
 SetOutputFilter DEFLATE 
< / FilesMatch> 
< / IfModule> 
  

将以上内容添加到.htaccess后，请观察相关的标题字段以进行验证。

如果您有兴趣了解更多资讯，请参阅缓存控件和压缩。

When my site loads there is a freeze of a few seconds before the browser displays text that is rendered with font face (text with arial font gets displayed immediately).

I've been getting complaints from users that experience a freeze of up to 10 seconds.

What can I do about that?

here is how I insert the font face:

@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');
}

解决方案

Try compressing and caching your fonts. If you use Apache, you can configure this using .htaccess

Here is a very helpful overview from the performance guru Steve Sounders

Additional info and resources

Assuming you use Apache and the modules mod_expires and mod_deflate are enabled, you can add the following rules to your .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>

After adding the above to .htaccess, observe the relevant header fields to verify.

Should you be interested in learning more, check out speed tips for cache control, and compression.

这篇关于字体会导致性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！