css压缩处理字体包文件

本文章参考

问题

我们在写样式的时候,经常会遇到ui给出的特殊字体, 我本人之前遇到这种情况通常都是让ui切图，然后压缩图片，这样对于一些相对与后管配置的动态元素实现困难

解决

字蛛
中文字体自动化压缩工具。官方网站：http://font-spider.org

特性
轻巧：数 MB 的中文字体可被压成几十 KB
简单：完全基于 CSS，无需 js 与服务端支持
兼容：自动转码，支持 IE 与标准化的浏览器
自然：文本支持选中、搜索、翻译、朗读、缩放

原理
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，并生成跨浏览器使用的格式。

构建 CSS 语法树，分析字体与选择器规则
使用包含 WebFont 的 CSS 选择器索引站点的文本
匹配字体的字符数据，剔除无用的字符
编码成跨浏览器使用的字体格式

以上原理可以帮助我们实现 把ui给的字体包,过滤出来我们想要的某些字体，从而达到减少体积的目的

安装

npm install font-spider -g

使用

Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。

Base64编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML (en-US) 中储存复杂数据时使用。

以上解释来源于MDN 所以，我们在引用的时候 最好转化成base64

@font-face {font-family: "iconfont";
 src: url(data:font/truetype;charset=utf-8;base64,编码后的内容);
}
.iconfont {
  font-family: 'iconfont' !important;
}