前端笔记-css sprite,font+html,font+css

使用Icon Fonts好处
1.灵活性：轻松改变图标的颜色或其他css效果
2.可扩展性：改变图标大小就像改变字体大小一样容易
3.矢量性：缩放图标不会影响清晰度
4.兼容性：字体图标支持所有现代浏览器
5.本地使用：通过添加定制字体到本地系统，可以在不同的设计和编辑应用程序中使用
他们

工具
IcoMoon
https://icomoon.io/

创建字体图标
http://flowerboys.cn/font/

字体文件格式：
ETO
IE专用字体

WOFF Web字体最佳格式

TTF mac 和 WIN操作系统

SVG 用于字体渲染的一种格式 google 苹果

考虑到兼容性，同时引入

@font-face属性
用法：
@font-face{
font-family:<family-name>
src:[<url>[format(<string>#)?|<font-face-name>]]#;
font-weight:<weight>;
font-style:<style>;
}

@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-
opentype")/*IE6-8不显示问题,起作用的是？*/
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}

icomoon第三个按钮下载字体后解压
demo里面取得十六进制码，放入<i></i>中注意前面加&#x后面加；

font+css

<i class="imooc-icon icon-pen"></i>
.icon-pen:before{
content:"e604"；
}

1.：before伪元素 name前插入
2.content属性

下载界面preference可以改变use类型

一个i标签插入两个元素