当我的网站加载时,浏览器显示使用字体呈现的文本之前会冻结几秒钟(使用 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 进行配置
这里有一个非常有用的概述 http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/来自表演大师 Steve Sounders
附加信息和资源
假设您使用 Apache 和模块mod_expires http://httpd.apache.org/docs/2.0/mod/mod_expires.html and mod_deflate http://httpd.apache.org/docs/2.0/mod/mod_deflate.html已启用,您可以将以下规则添加到您的 .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后,观察相关头字段进行验证。
如果您有兴趣了解更多信息,请查看速度提示缓存控制 http://www.askapache.com/htaccess/apache-speed-cache-control.html, and 压缩 http://www.askapache.com/htaccess/apache-speed-compression.html.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)