HTML-CSS(四十五)@font-face字体图标

font-face 是CSS3中的一个模块，他主要是把自己定义的web字体嵌入到你的网页中
好处：

1.可以非常方便的改变大小和颜色

直接通过font-size、color等文字样式去修饰字体图标

2.放大后不会失真

3.减少请求次数和提高加载速度

4.简化网页布局

一般图片和文字排列比较麻烦，但是文字和文字之间排列就可以不用麻烦排列

5.减少设计师和前端工程师的工作量
设计师不需要设计图标，前端工程师也不需要调用雪碧图和自己切图
6.可使用计算机没有提供的字体

@font-face {
				font-family: name（名字随意起）;//提供一个映射关系，可以在其他的元素引用
				src: url(//at.alicdn.com/t/font_1401963178_8135476.eot);
				src: url(//at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype')
				, url(//at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'), 
				url(//at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'), 
				url(//at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')
			}

优点：像.woff,.ttf做兼容平台处理的，在整个页面引入一次@font-face就能够在全局引用字体图标
font-family: name;//提供一个映射关系，可以在其他的元素引用,例如

div{//该div就能够使用一些符号，获取@font-face里的字体图标

​     font-family: hello

}

引用字体图标

线上引用其他官网的字体图标方法：

1.定义@font-face
2.引入地址
3.定义font-family和名字（名字随意定义）
4.在需要用到图标的元素上引入font-family：name
5.在需要用到元素html代码内添加每个图标对应的特殊符号，就能够引用了

因为每次需要用的时候，都需要在元素代码内添加一个特殊符号，而且特殊符号较多，也记不全，所以可以通过伪类的方法添加

.gouwuche:after{
				content:'󰅈';
				display: inline-block;
			}

icon-font图标引用：

阿里巴巴矢量图标库官方网址： https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.d2b281273&type=2
在icng-font图标引用方法：
黑白图标的引用：
1.在icon-font创建项目
2.将喜欢的图标放到购物车，然后再放到项目当中。
3.进入到项目中，下载项目到本地
4.解压，将.w0ff,.eot,.ttf,.css,.svg后缀拷贝到你的项目文件下（可以在项目文件下新建一个文件夹，存储icon-font的资料）
5.在你的html代码，通过link引入刚刚解压之后css文件。因为在那个css文件中，你可以看到他已经做好字体图标的准备工作，已经做了我们上一个要求的那些@fong-face线上引用，包括@font-family的定义，以及url地址引入和就兼容平台。
6.在你的元素当中添加基础类名 iconfont+需要用到的图标类名（可以直接打开下载的压缩包里的demo_index.html，跟着它font-class指示做，然后在相应的元素引入他给的基类名和特殊图标类名）

彩色图标的引用：
在黑白图标的引用的基础上，将解压后的js文件也拷贝到你的项目文件下，并且在你的html中引入。（可以在demo_index.html中的symbol板块看到具体的使用方法）

自定义字体图标（https:icomoon.io/app）

​ 这个要有制作svg的经验，有经验的可以尝试做看官网弄