一、背景
后端开发的朋友们，我们经常会遇到设计稿中需要恢复特殊字体的情况。 这时，我们可能会采取两种解决方案： 1、使用Photoshop将文本视口单独导入到图像中； 2.直接引入字体变化字体库.ttf文件
首先，第一种解决方案的缺点是使用图片而不是文本，生产和维护成本非常高。 前期切割图片、合并精灵图片耗时较长，后期修改和维护更是麻烦。 同时使用图片会带来更多的麻烦。 宽带消费。 在用户体验方面，用户选择和复制文本比较困难css禁止图标，体验不好。 第二种方案解决了上述部分问题，而且由于汉字数量过多，中文字体文件也较大。 一般会有几个M大小，不适合在项目中使用。 尤其是联通端的项目，因为字体加载速度很慢，体验会很不好。 本博客将介绍两个用于实现联通端项目的手动工具。 享受使用特殊字体的乐趣。 它们是 Font-Spider 和 fontmin。
2. 浏览器对字体的支持
不同的浏览器对字体的支持不同，所以我们要针对不同的浏览器制作不同的字体。 右图显示了浏览器对字体的支持情况。 N表示不支持，P表示部分支持，Y表示支持。
3.蜘蛛字体
Word Spider通过解析本地CSS和HTML文件来获取WebFont中未使用的字符，从字体中删除这些字符数据以实现压缩，并生成跨浏览器使用的格式。 Font-Spider的使用非常简单，官网有详细介绍。 这里简单介绍一下，也可以直接去官网查看。
1.首先全局安装font-slider
npm install font-spider -g2.在css中使用
/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'pinghei';
}复制
提示：@font-face中src定义的.ttf文件必须存在，其余格式将由工具手动生成
3. 运行字体滑块命令
font-spider ./demo/*.html复制
页面所依赖的字体将被手动压缩。 原来几兆字节的字体文件现在只有几千字节。 不是很好吗？
4.使用gulp和grunt插件
font-slider不仅可以直接编译，还提供了gulp和grunt的插件，可以在项目中更方便地使用。 具体使用方法可以直接去github上查看。
Word Spider grunt 插件：
Word Spider gulp插件：
5. 使用限制
Font-slider其实很容易使用，其原理是直接分析本地CSS和HTML文件来获取WebFont中未使用的字符。 这样就没有办法使用font-slider来动态生成文本了。 这是坏消息！ 尤其是现在，很多框架都是数据驱动的，很多文本不会直接出现在HTML文件中。 对于这种情况，下面介绍的fontmin似乎可以解决。
4.使用Fontmin
Fontmin是百度推出的字体子集解决方案。 使用fontmin按需提取字体中的部分字体，最小化打包字体，手动生成WebFont字体文件（ttf/woff/eot/svg）和CSS文件，使用@font-face将自定义字体呈现到网页中，改善网页文字体验。 Fontmin 提供了两种使用 Node.js 模块和客户端的方式。 下面主要介绍Node.js模块的使用。 更多使用方法请参见Fontmin快速手册。
1.安装fontmin
npm i -g fontmin复制
2.配置
在项目中创建fontmin.js
var Fontmin = require('fontmin');
var srcPath = 'font/*.ttf'; // 字体源文件路径
var destPath = 'font'; // 字体输出路径
var text = '我你今天中大奖了快来领红包';//有哪些文字可能需要用到这个字体的,都可以在这里进行配置
// 初始化
var fontmin = new Fontmin()
.src(srcPath) // 输入配置
.use(Fontmin.glyph({ // 字型提取插件
text: text // 所需文字
}))
.use(Fontmin.ttf2eot()) // eot 转换插件
.use(Fontmin.ttf2woff()) // woff 转换插件
.use(Fontmin.ttf2svg()) // svg 转换插件
.use(Fontmin.css()) // css 生成插件
.dest(destPath); // 输出配置
// 执行
fontmin.run(function (err, files, stream) {
if (err) { // 异常捕捉
console.error(err);
}
console.log('done'); // 成功
});复制
3.输出
执行fontmin.js文件，在配置的目录下输出对应的字体和css文件。 字体文件也会从原来的M变成几个K。
node fontmin.js复制
Fontmin 还提供了一个客户端。 可以直接将TTF拖进去，在左侧输入需要的文字css禁止图标，两边实时看到效果。 单击“生成”即可一步完成。 推荐使用节点模块方式。 只要在项目中配置好，如果有文字需要使用字体，直接添加到fontmin.js中的文字中，执行nodefontmin.js命令就可以了。
4、缺点
Fontmin适用于文本不经常变化，或者在一定范围内变化的情况。 如果文字经常变化，但又没有固定的范围，那就没有办法了。
