徐伟轩博客-爱写歌的程序员思考和科普的日常自媒体

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码
TypechoJoeTheme

如何提高引入字体的加载速度

徐伟轩博主
2022-11-02 12:40
/
2 评论
/
158 阅读
/
626 字
11月02

在更注重设计效果的今天,网站的字体也被关注较多。而不少字体可能体积较大,导致网站加载速度很慢,这有比较好的解决方案吗?
抛开字体版权、能否商用,客户肯定也是希望能有一套和他们网站风格搭配的字体。
像中文字体,一般可能在5MB左右,有的客户想要的字体甚至能达到惊人的20MB。我想了想,咱做的网站程序也才2MB啊!?

虽然我对于这样把关注重点耗费在字体上的做法不敢苟同,但是假设客户就想要这字体,而且这字体又恰好是免费可以商用的呢?
【概念】
例如在CSS代码中,我们怎么样引入自己想要的字体,而不是系统默认的一些字体?
先要写个声明策略吧:
@font-face {

font-style: normal;
font-family: 'MyFont';
src: url('/font/MyFont.ttf') format('truetype');

}
再具体进行调用,有时候甚至可以直接在body里定义这一个字体以显统一。
h1 {font-family:Arial,serif; }/ 系统字体 /
.fontsloaded h1 {font-family:'MyFont',serif; }/ 自定义的字体 /
上面的例子大家能看出来,其实自定义字体,在font-family后,其实加了引号对吧,一下子对比出来了。

1、压缩、转换格式
压缩字体或者转换字体格式,这个有一定的工具,例如可以把ttf字体改为otf,但是具体能缩小到多少说不好,可以尝试一下。
2、一个神器font-spider
这个东西的概念,其实是从@font-face着手,遍历查找你网站内的文字,把不需要的文字去掉,那其实能极大缩小字体文件
但是友情提醒:你哪能保证网站里的用到的文字一成不变?
3、CDN
有时候预算够,可以考虑的。
4、谷歌的解决方案
切片字体,而谷歌Google Fonts API本身支持跨网站缓存,因此越多的网站使用切片字体,用户加载的时间就可能越短。
友情提醒:如果需要翻墙,就当我没说。
5、base64转换
这个的话,其实也就是字体需要转换,一般第二次刷新网页时候会加载快。
6、欢迎大神提供更好的解决方案……
【总结】
不是迫不得已,谁愿意去选择一个耗费服务器资源,且可能增加更多成本的字体引入到网站里呢?
不过有好的方案,能尽量解决网站内字体加载慢的问题,则会事半功倍。

引入字体
赞(1)
赞赏
感谢您的支持,我们会继续努力哒!
版权:

徐伟轩博客-爱写歌的程序员思考和科普的日常自媒体

本文链接:

https://letus.top/archives/663.html(转载时需注明本文出处及文章链接)

如无特别注明,本站内容为原创。

如需转载或刊登,请联系我们获得授权。

评论 (2)
本篇文章评论功能已关闭

亲爱的朋友

一切伟大,源于勇敢的开始。

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

标签云