Css 字体会导致性能问题

加载“我的网站”时，浏览器在显示以字体呈现的文本（立即显示带有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');
}

---

尝试压缩和缓存字体。如果您使用Apache，则可以使用.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>

下面是一个来自表演大师史蒂夫·桑德斯（Steve Sounders）的非常精彩的演讲

其他信息和资源

假设您使用Apache和模块，并且已启用，则可以将以下规则添加到.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>

标头集缓存控制：公共
过期于
ExpiresByType字体/ttf“访问加1个月”
ExpiresByType字体/woff“访问加1个月”
ExpiresByType图像/svg+xml“访问加1个月”
SetOutputFilter放气

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

---

如果您有兴趣了解更多信息，请查看和的速度提示。

字体大小是多少？您描述的浏览器遇到了哪些问题？事实上，是chrome遇到了最滞后的问题“Typekit显然有一些问题–自定义字体的使用在一年内增加了两倍。出于性能原因，我警告不要使用@font-face，但性能并不是最重要的。（喘息！）自定义字体显然具有美学上的好处，对网站所有者很有吸引力。”这篇文章非常有趣。我不明白的是如何缓存字体文件？我添加了其他信息。祝你好运