【CSS3】CSS字体图标

发现了一个超好玩的东西，字体图标
1 产生由来：图片是有诸多优点的，但是缺点也很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能，更重要的是图片不能很好的进行缩放，因为图片放大和缩小会失真。在移动端响应式模式下，很多情况我们希望我们的图标是可以进行缩放的，这就可以用到字体图标技术。
2 字体图标的优点：
1） 可以做出跟图片一样可以做的事情，改变透明度，旋转度，透明效果等等
2） 本质是文字，可以随意的改变颜色，产生阴影，透明效果等等
3） 本身体积更小，但是携带的信息并没有消减
4） 几乎支持所有的浏览器
5） 移动端设备必备良药

3 使用流程
1）UI人员设计字体图标效果图（svg）
2) 前端人员上传生成兼容性字体文件包
3）前端人员下载兼容字体文件包到本地
4）把字体文件包引入到HTML页面中
4 使用步骤：
1） 在样式中声明字体
2） 在盒子中引用字体
3 ）盒子里面添加结构

一般需要UI人员设计的图标很少，因为有很多现成的网站提供一些字体图标，比如：链接: https://icomoon.io.
还有https://www.iconfont.cn/，然后我么需要做的就是第3,4步，将字体文件包下载下来，然后引入到HTML文件中，如下以icomoon网站的字体图标下载引入为例：
首先 点击进入icoMoon APP

点击选中自己想要的图标

然后点击 Generate Font 进入如下界面

点击download 进行下载安装包 解压之后有这些文件

将fonts文件复制粘贴到自己的项目文件中

然后在CSS样式中声明字体，声明在style文件中

将@font-face那一部分复制到CSS中进行中字体声明

@font-face {
			  font-family: 'icomoon';
			  src:  url('fonts/icomoon.eot?bhm215');
			  src:  url('fonts/icomoon.eot?bhm215#iefix') format('embedded-opentype'),
			    url('fonts/icomoon.ttf?bhm215') format('truetype'),
			    url('fonts/icomoon.woff?bhm215') format('woff'),
			    url('fonts/icomoon.svg?bhm215#icomoon') format('svg');
			  font-weight: normal;
			  font-style: normal;
			  font-display: block;
			}

之后使用字体：

span {
				font-family: "icomoon";
				color: yellow;
				font-size: 100px;
			}

在盒子里面添加结构：
步骤是复制最右边这个小图标，然后粘贴到span中去：

	<span></span>

运行就OK了，之后如果再追加字体，就可以在网站的import icons 那导入json文件进行添加，然后重复之前的步骤进行下载就可以了

运行结果展示：（这是以字体的形式展示的，不是图标）