前端项目中大量使用字体图标代替真是图片去实现一些icon图标的展示，今天跟大家聊一聊字体图标实现背后的原理是什么，为何简单给元素加个class,就能展示图形效果？
'字体属性'
font-family 与 @font-face
1. font-family属性
指定元素的字体, 如果有指定属性，首先会去查找电脑里查找对应的字体文件，找到文件后找到文件后根据 unicode 码去查找绘制外形，找到后再绘制到页面上。
如果没有设置属性，那么默认使用浏览器设置的字体。
字体渲染查找链路如下：
2. @font-face 设置自定义字体，包含两个属性：
font-family：自定义字体的别名；
src: 自定义字体的来源;
当设置了自定义字体文件后，浏览器会从自定义字体文件查找对应内容的unicode码，去查找匹配的字体图形并渲染，所以自定义字体文件的查询链路如下：
我们在icon-font官网上验证一下，发现输入中文字符(因为中文字符最后也会转换为unicode码)，依然可以正常渲染图片：
3. font-size
最后，由于字体图标其实也是通过更改字符对应的图形内容，最后以自定义图案的形式渲染对应字体，本质上还是字符，因此我们可以通过调整font-size的大小来调整图标的尺寸，这样就实现了字体图标的效果。
扩展 - 'content属性'
1. 用于清除浮动
我们一般用的最多的就是结合伪类的content属性，利用clear:both来清除浮动带来的影响，如下：
2. content图片生成
利用content的url功能符可以直接进行图片渲染，但是这样有一个问题，就是无法设置图片的大小，它始终会以默认的大小展示，对于我们前端的一些场景图标展示不够灵活，且对齐方式不好处理。
