前端CSS3字体详解@fontface （二）ttf文件和base64编码的互相转换

背景

uni-app中uni-icons引入图标字体的方式如下，url中是很长一串base64的字符。这个字符其实就是字体ttf文件的base64编码，代替了引入字体文件本身。
注：如果不知道ttf和字体图标的知识可以参考我的上一篇博客。

@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTYBH1lsAAHcQAAAAHEdERUYAJwBmAAB28AAAAB5PUy8yWe1cyQAAAYgAAABg
(省略一万字)AABYAAAACAAEAAQBfAAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANJrTZkAAAAA2DhhuQ==)
		format('truetype');
}

将ttf转换为base64

在线转码
https://www.motobit.com/util/base64-decoder-encoder.asp
引入方式

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

base64抓换位ttf

1. 打开谷歌浏览器，F12进入开发者模式，打开network。
2. 过滤器选择font
3. 右键选择新窗口打开，就会自动下载字体文件
4. 修改文件名为xx.ttf 就可以了。