随着网站技术的发展，网站图标也跟着进化了。最早网站的图标都是一张张小图片，后来因为请求次数太多，不利于高并发，就诞生了图片地图，把所有图标画到一张图上，这样只需要加载一次。后来出现了高清屏，图片格式无法矢量放大，一放大就马赛克，于是出现了字体图标，用字体的矢量方式来替换图片，还能随意改变颜色。再后来，不满足于单色字体，Iconfont又弄出了彩色字体。但是，字体总归是要单独加载，还是无法简化到最后一步。那么就没有办法了吗？当然有，base64字体就是解决方案。
1.我们需要借助阿里的一个站点 iconfont [https://www.iconfont.cn]，这是一个阿里的字体图标站点，我们可以很轻松的创建一个自己的字体。
2.搜索别人的字体或自己设计上传字体并添加到自己的字体项目中
3.把整理好的字体下载到自己的电脑，并解压出来。
4.打开字体文件夹里的 demo_index.html ，可以看到我们的字体图标已经可以正常显示了。
文件下面有使用方法，如果你只需要矢量字体而不用base64的话，那么你现在就可以使用了。
5.打开 transfonter 网站 https://transfonter.org 。这是一个可以把字体转为base64编码的站点。
6.点击左边的 Add fonts 按钮，上传我们的 iconfont.woff 字体。
7.在下方设置中，我们打开 Base64 encode 开关，然后取消 WOFF 和 WOFF2 这两个选项。因为我们不需要输出字体了。
8.点击右侧的 Convert 转换按钮，然后点击 Download 下载我们的文件。
9.打开我们下载的文件，我们可以看到只有3个文件。其中只有 stylesheet.css 文件有用。
stylesheet.css 文件里保存着base64转换后的字体数据。我们打开文件就能看到字体转换后的css信息，如果你的站点字体都是这么做那么可以保持一个独立的字体css，如果你想再精简的话，那就复制里面的代码到其他文件里去，比如 html文件 或 javascript文件 。 
10.我们新建一个 html 文件来测试是否成功。
孤狼 | 
2020-06-17 23:28:06 | 
5587°C | 
2条评论 ]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="stylesheet.css">
<style>
.iconfont{
/*这句很重要*/
font-family: "iconfont" !important;
font-size:60px;
}
</style>
</head>
<body>
<div class="iconfont">& #xe605;这里输入你自己的unicode编码</div>
</body>
</html>11.输入完上面的代码之后，我们来运行看看。
可以看到我们的字体图标已经可以正常显示了。
这里需要注意的几点：
1.stylesheet.css文件里定义了字体的font-family可以改成自己定义的。
2.一定需要单独建立一条CSS来引用字体font-family。否则字体无法被引用。为了确保一定生效最好加上!important。
3.引用的块节点内部需要输入上图标的名称，因为他只是字体，所以依然需要对应的名称才能调用。图标名称就在iconfont下载的使用说明里，每个图标下面都有备注和名称。默认使用Unicode码来调用
好了，今天就说到这里，你Get到了吗？
赞赏一个鸡腿
