痛点
前端开发的同学，我们经常会碰到需要还原设计稿中的特殊字体。我们可能会采用两种方案
- 使用photoshop将文本图层单独导出成图片;
- 直接引入改字体的字体库.ttf文件
第一种方案：适合字体加图案复杂，文案一般不会变
第二种方案：适合普通的文本，文案变化
但字体文件通常都会有几 M 大小，加载速度很慢，体验会十分不好。我们可以采用 Font-Spider (字蛛) 来对字体文件进行压缩。
缺点：不适合前端渲染的页面，文字数据是从后端接口获取的
实际操作
我们是拿到一些死文字，或者后端的渲染页面
<!-- static/font/ysf-white.ttf -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./font.css">
</head>
<body>
<!-- 这里的class="font" 对应上面font.css中的代码 -->
<div class="font">
<span></span>解析报告</span>
<span>角色验证</span>
<span>健康机关</span>
</div>
<div class="font">
<span>角色验证</span>
<span>请输入数值，确认您的信息！</span>
<span>体重</span>
<span>身高</span>
<span>腰围</span>
<span>臀围</span>
<span>CM</span>
<span>Kg</span>
<span>提交</span>
</div>
</body>
</html>
@charset 'utf-8';
@font-face {
/*所有的ysf-white填入你的字体名称*/
font-family: 'ysf-white';
/*这里的路径填入你的相对路径即可*/
src: url('./ysf-white.ttf');
font-weight: normal;
font-style: normal;
}
.font {
/*引用字体*/
font-family: 'ysf-white';
}
项目中的字体文件
在 src/style/common.css 我们引入了字体文件
@font-face {
font-family: 'ysf-white';
src: url('../../static/font/ysf-white.ttf');
}
这个字体文件路径是 static/font/ysf-white.ttf，此文件是压缩后的文件
压缩前的文件是 static/font/.font-spider/ysf-white.ttf
字体压缩font-spider的使用
了解更多http://font-spider.org/
首先全局安装:
npm install font-spider -g
原理：搜索当前页面所有使用@font-face的字体，然后执行font-spider压缩的时候，将字体包中没用用到的文字全部排除，只留下要使用的部分文字已达到压缩的目的。
修改或添加static/font/font.html中的文字
# 进入字体文件夹
cd static/font
# 把源文件拷贝并替换当前font目录下的字体文件，并且删除.font-spider
cp ./.font-spider/ysf-white.ttf ./ysf-white.ttf && rm -rf ./.font-spider
# 执行新的压缩
font-spider ./font.html
压缩完会发现，新的压缩文件在static/font/ysf-white.ttf
源文件在static/font/.font-spider/ysf-white.ttf