前端怎么加粗字体_前端项目字体大小优化

1. 字体简介

前端项目绕不开的东西就是针对字体的配置，有时候UED同学提供的格式并不是合适的格式。这就需要我们自己做些对应的转换。首先来看看主流的字体有哪些：

1. WOFF/WOFF2
2. EOT
3. TTF/OTF
4. SVG

具体针对不同格式的介绍，在知乎和各大平台上已经有很多了，这里只推荐两篇：

1. 教你使用 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. 其他字体处理方式

1. font-spider： 腾讯提供的一种字体压缩方案，类似fontmin，分析当前html中用到的文字，然后将没有用到的剔除掉。适合文本相对固定的站点。
2. CDN： 压缩后发送到不同cdn服务器，然后本地配置相应的缓存策略。
3. fallback策略：除了font-family属性中添加其他字体外（比如sans-serif），font-face提供font-display属性来配置字体加载阻塞时的备选方案：

font-display​developer.mozilla.org