1. 字体简介
前端项目绕不开的东西就是针对字体的配置,有时候UED同学提供的格式并不是合适的格式。这就需要我们自己做些对应的转换。首先来看看主流的字体有哪些:
- WOFF/WOFF2
- EOT
- TTF/OTF
- SVG
具体针对不同格式的介绍,在知乎和各大平台上已经有很多了,这里只推荐两篇:
- 教你使用 font-face:无法掩盖对CSS-Trick的喜爱,专业,其中列举了不同字体的来源及浏览器兼容器测试;
2. 网页端字体加载优化 - 前端 - 掘金: 讲解字体如何高效加载的技巧;
3. https://zhuanlan.zhihu.com/p/28179203: 知乎上对几种格式的简单介绍;
2. 字体转换
熟悉完常见格式就会明白woff和woff2是现代前端友好的字体格式,压缩比较高。那么如果手头有一个OTF格式的字体,想要改成WOFF/WOFF2格式的该怎么办么?其实已经有现成的在线转换手段:
https://convertio.co/convertio.co该平台专业处理各类视频、字体、文档的格式转换,而且性能优异,可以以插件形式引入(比如Chrome Extension)。基本上一个传统17MB的OTF字体转换后只有5kb,完全不需要引入fallback操作。
3. 其他字体处理方式
- font-spider: 腾讯提供的一种字体压缩方案,类似fontmin,分析当前html中用到的文字,然后将没有用到的剔除掉。适合文本相对固定的站点。
- CDN: 压缩后发送到不同cdn服务器,然后本地配置相应的缓存策略。
- fallback策略:除了font-family属性中添加其他字体外(比如sans-serif),font-face提供font-display属性来配置字体加载阻塞时的备选方案: