关于项目中字体文件的引入 - childlabor/blog GitHub Wiki
起因：
设计稿采用的全局字体为普惠体（5种字重，常用到其中两种Regular/Medium）；
Regular 对应 font-weight: 400; （无法通过设置字重500 转成 Medium）
Medium 对应 font-weight: 500;
系统常见字体（雅黑 苹方 arial等）对应加粗 为 600 700，所以在未成功安装普惠体的系统上，所见页面本应加粗的字体未加粗。
如果要做加粗的兼容处理必须设置以下属性：
font-family: AlibabaPuHuiTi-Medium；
font-weight: 600;
实际效果：
在安装有AlibabaPuHuiTi字体系统下渲染，文本字体是要比medium更粗一点的，这会造成页面与设计稿的差异。
方案：
引入第三方字体，这样能统一使用指定字体渲染。但是中文字体包，体积太大（几兆到几十兆不等）。
原因：
1.中文字体包含的字形数量很多，而英文字体仅包含26个字母以及一些其他符号。
2.中文字形的线条远比英文字形的线条复杂，用于控制中文字形线条的位置点比英文字形更多。
因此中文字体文件包大。
压缩：
那么要引入字体文件必须减小字体包。
压缩精简一个字体文件的思路就是将未使用的字形移除，几个工具能处理：
font-spider
原理是通过爬取HTML文件以及关联的CSS，找到设置了字体的样式，再爬取相关的的字符，排序去重。
font-spider升级版，支持线上页面，通过依赖 Chrome Puppeteer 无头浏览器来爬取当前页面上的文字来动态生成精简版的 webfont。
其他包括FontMin等功能也都差不多
遗留问题：
无法处理的动态文本，只支持window.load之前的文本数据，基本无法满足vue等数据驱动的框架构建的单页面应用。
并且在页面表现上，在字体文件加载完成后，会有个字体交换期（由系统字体转为第三方字体），会导致页面字体闪烁，字体文件越大、交换的字越多表现越明显。
结论：
中文区别于英文的26个字母，其数量庞大，导致字体文件巨大，不适合引入全部字体包；
虽然可以引入部分字体，用于logo、标题等确定性文本显示，但是完全可以使用图片等其他方式替代。
所以，不建议在实际项目中引入第三方中文字体包。
项目优化：
不引入字体，默认body设置font-family: AlibabaPuHuiTi；
设计稿中为AlibabaPuHuiTi-Medium的字体，一律设置font-weight: 600 以兼容系统字体。