字体导致性能问题

Question

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

我收到了用户的投诉，称他们遇到了长达 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 进行配置，

这是一个非常有用的概述来自性能专家 Steve Sounders

其他信息和资源

假设您使用 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>

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

如果您有兴趣了解更多信息，请查看缓存控制的速度提示 和压缩。