CSS3 总结（十四）——字体图标

字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不断增加的总文件的大小，还增加了很多额外的HTTP请求，这都会大大降低网页的性能，更重要的是，图片不能很好的进行缩放，因为图片放大和缩小会失真，我们后面学习移动端响应式，很多情况下，希望我们的图标是可以缩放的，”字体图标“这个技术可以很好的帮我们解决这个问题。

优点
1.可以做出跟图片一样可以做的事情，如改变透明度\旋转度等。
2.本质其实是文字，可以很随意的改变颜色，产生阴影、透明效果等。
3.本身体积很小，但携带的信息并没有削减。
4.几乎支持所有的浏览器，是移动端必备良药

字体图标使用流程

步骤
1.UI人员设计字体图标效果图（svg文件）。
2.前端人员上传生成兼容性字体文件包。（上传生成字体包，推荐网址：http://icomoon.io，外国网站，打开较慢。）
3.前端人员下载兼容字体文件包到本地。当字体图标较为大众时，可以自行上网搜索看看有没有，有的话直接下载使用，不用别人做出来，自己上传生成文件，麻烦。推荐网址：http://www.iconfont.cn（阿里iconfont字库）或http://icomoon.io，还有其他自己别懒了，百度去。
4.把字体文件包引入到HTML页面中。（解压后把fonts文件复制到项目目录下，原文件不要动）

字体图标的使用
1.在样式里面声明字体，告诉人家我们自己定义的字体。

<style>
@font-face {
  font-family: 'icomoon';/*字体名字可以自己取*/
  src:  url('fonts/icomoon.eot?7kkyc2'); //字体文件路径，
  自己复制到项目下的那个，下面为其他格式，防止用户浏览器不兼容该字体。
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
</style>

注意：格式大致统一，直接复制粘帖改下名字即可，路径根据所在位置相应改下即可。

2.让盒子（元素）使用字体

元素{
	font-family:"自己定义的字体名称";
}

3.盒子（元素）里面添加结构
方法一：

<元素>字体图标对应的东东（上截图）</元素>

注意：自己下载的字体文件包内有个html文件，打开就是这样的，复制鼠标选中的那个图标粘贴到元素内容即可。

方法二：

元素::before{
	content:"\16进制码";  //别漏了"\"。
}

注意：
1.字体图标本质是字体，可以使用字体的属性来改变样式。
2.下载的字体文件包中有个.json文件，不要删除，该文件可以用来追加新的字体图标。追加方式：在官网中点击import icons导入.json文件，再追加字体图标，重新下载即可。