共计 3880 个字符，预计需要花费 10 分钟才能阅读完成。
本文的目标是：使用 css 可以控制图标的颜色，大小需要工具：png 转 svg 工具(如果 ui 给的 svg 就更好了) iconfont(图标转代码)
第一步，把图标转成 svg 格式的
打开网址 https://www.bejson.com/conver…
上传
下载
第二步，使用 iconfont 生成代码
打开网址：https://www.iconfont.cn
点击图标管理 -> 我的图标，如下图
进入到我的图标之后，点击上传 icon, 如下图
点此上传 选中 svg 文件，
上传之后，点击去除颜色并提交
上传完之后就会自动回到图标管理页，点击批量操作 -> 批量加入购物车，然后进入购物车
在购物车中，点击下载代码
第三步，生成的代码运用到项目中
生成的项目目录如下：
点击 demo_index.html，可以查看官网给出的使用方式
我项目中使用的是第二种，所以只介绍第二种使用方式
第一步，把 iconfont.css 复制到你的 css 样式中
第二步，根据 iconfont.css 中你需要的字体，把生成的项目中的字体文件和 svg 文件复制到你的项目目录中，需要和 css 文件同级目录，否则需要修改 iconfont.css 中引入字体文件的路径，默认情况下引入下图的字体(如果不需要兼容 ie8 和 ios4.1-，可移除相应的字体，详情看下面的介绍)
第三步，使用
<span class=”icon iconfont icon-play”></span>
// 或者
<i class=”icon iconfont icon-play”></i>
改变样式的话
span{
color:red
}
i{
color:red
}
最后，原理分析
1. 理解 @font face 规则
@font face 的本质是变量，该规则支持的 css 属性有很多，我们常用的有：font-family,src,font-style,font-weight
首先来看一下，font-family, 这里的 font-family 可以看成一个变量，名字可以随便取，比如用一个 $ 符，但要注意不要覆盖系统已经存在的字体
/*font-family 如果是符号的话需要用引号包起来 */
@font-face{
font-family:’$’
}
/* 使用 iconfont 生成的 @font-face 规则 font-family 如下：*/
@font-face{
font-family:’iconfont’
}
然后看下我们的重点 src 属性，src 属性用来引入字体资源，引入的字体资源可以使本地的 (使用 local() 引入)，也可以是外链字体 (使用 url() 引入)，注意 local 要 ie9 及以上版本才支持
这里我们重点来看下 url 功能符
@font-face{
font-family:’icon’;
src:url(‘icon.eot’) format(‘eot’);/*ie6-8*/
src: url(‘icon.eot#iefix’) format(’embedded-opentype’),
url(‘icon.woff2’) format(‘woff2’)
url(‘icon.woff’) format(‘woff’),
url(‘icon.ttf’) format(‘typetrue’),
url(‘icon.svg#icon’) format(‘svg’);
}
//format 的作用是让浏览器提前知道加载字体的格式，以决定是否加载字体
上面代码一共出现了五种字体格式，分别是 eot,woff,woff2,ttf,svg
svg 格式是为了兼容 ios4.1 及之前的版本，现在的 ios 版本都到 11 了，所以完全可以舍弃
eot 是 ie 私有的，所有版本的 ie 都支持 eot 格式，并不是只有 ie6-8。只是，ie6-ie8 仅支持 eot 这一种格式
woff（web open font format）是专门为 web 开发而设计的字体，其字体尺寸更小，加载更快，应该优先使用。Android4.4 开始全面支持
woff2 是 woff 的二代，字体文件尺寸更小，但是仅 chrome 和 firefox 支持的比较好
ttf 作为系统安装字体的格式，兼容性很好，但体积较大
综上，我们得出以上结论
svg 格式果断舍弃
如果无需兼容 ie8,eot 格式舍弃
如果无需兼容 Android4.3 以前的版本，ttf 格式舍弃
2. iconfont 生成字体图标原理
iconfont 生成的字体如下：
@font-face {
font-family: “iconfont”;
src: url(‘iconfont.eot?t=1547714990292’);
/* IE9 */
src: url(‘iconfont.eot?t=1547714990292#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACBgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEJINPATYCJAMICwYABCAFhG0HLhvzBhHVm0XJviiwjblCNx4e1RAbqvoScwd3wUWGawQq7bPvQzw8v+7p3Hnv/52F1bbLColMUKi7FapgBBOVZ2CcDsadACIZ7O93+tTc9nW/JuKoRNUmmiAW/joh4qVzC50Q2dyMtzUqQrEk53k/fUfSbiDkVwD8cbjXpgc4313a5Tjnoi7AOJAC3QPXAgmkD/LJv+Mfxi5oibsJNNLNEDGmNWWOUmYOCsSW0/qVyoxcbkgNpVCvmJnFaTVlcaQ4A3Aq+Pn4SjFKCrXEzJixbuwaIz4AKyLtrnZb4iEwptOCzSNhCDIxp1I/TYr8QySNVH/Wi22lBh8uVeXRN/uPRxB1Jr8JxHahXxPDYV4qdQEy7bmG94PORFqVlcjqH+baAbu7AM71qavD+25xUwr1TdTSXbmOgjo6aOTEtdzzhlD07Wfwh3kNLWxrj7Bjinp06gAWdAde7N/YCAfvirOKDa3s6mN/sJ8ePobHHoaNg/S9S30z1dTNb5s47+kQFh7MCP6N69BdPqII7qzvF2OXbAPsvszfu4zfS9cuo4/fe41Hu47H1ORtqTPw0k8353NTd41KqYcHt8d4mj81ujIHd/JT9939WKmT19BaV8T0GUgcUlMYh5QtAZn08c/zD3y/2idiavJz5oyGdIuw8C6CcGkCHZZGgb2tr32WF30s8se1QLHTBzjI4vpTFv32/uArMNIVuOMe/9uiattoCCv1s7JmyNmnsM132Ghb8VY9/qd0iaO4yFgqGsi3pQVkDaEjVc7aqf7juAtroRNgSjfcFDl2BGnfaPlxuxjJ20utDr0Oy/3YZ/qLFceoimHNsa4yGnacG0Tnm91qCBkydLHIzmuI+HxPexAwAlQofaTjX/0d42/y/5Y3r/8vYQbPKfBKYK1QBnQzUt67IfiHjI51WWOZiiIrjMpw4Zr0bkoaaYQKw+ZW3g41tiXRhpIzIBQa6ApJqQ8yY4dATWPDoK40HBoZbPz8xlrbJYncEIMcABBauAqFZu5C0sJjZMa+gZp2vkNdi0jQyLwgV2yM6hdRjWbUgg7MH6LdGtkqUWHqDf27aE6zAvwL+YwumPoxH7piQ55izPnxswgB8VZhBfthKRvsvCW00geRfRkGqrpRb7faKaMZtaAD5g+i3Rp5zUUVvn9D/y6aG2qqtC/kM3YOJr2xA/LKb51qbuWQ8+NnIgSItwpWoMVi+TewV3dLaKUXBnj3xYAaUVd+v7ywvt0WaMSUFGHlJnlH0f+uAwA=’) format(‘woff2’), url(‘iconfont.woff?t=1547714990292’) format(‘woff’), url(‘iconfont.ttf?t=1547714990292’) format(‘truetype’), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url(‘iconfont.svg?t=1547714990292#iconfont’) format(‘svg’);
/* iOS 4.1- */
}
.iconfont {
font-family: “iconfont” !important;
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
}
.icon-play:before {
content: “\e601”;
}
这里有两个需要关注的东西，一个是字体, 另一个是字符，这两个东西就是字体图标技术的本质。
字体的本质是字符集与图形的一种映射关系。
字体图标技术的实现就是把通常的字符集映射成了另外的图标形状. 例如把 e601 映射成了