网页的ICON图标

引自慕课网
用字体在网页中画ICON图标
当时字体图标不支持多色，不过在2016-10，阿里妈妈矢量图标平台支持了多色矢量图标。
点击这里：iconfont阿里妈妈矢量图标平台iconfont+全新上线

一、CSS Sprite

在国内称为“CSS雪碧”，也叫“CSS精灵”。
它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫“图片拼合”技术。

1.技术要点

1）background-image

2）background-position

2.特点

1）相对于单个小图标，它节省文件体积和服务器请求次数

2）一般情况下，需要保存为PNG-24的文件格式

3）可以设计出丰富多彩的颜色图标

3.难点

1）需要预先确定每个小图标的大小

2）注意小图标与小图标之间的距离

3）细心+耐心

二、font+HTML（unicode引用）

用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

1.技术要点

1）@font-face

/*font-face声明字体*/
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'),/* chrome,firefox,opera,Safari,Android,iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

字体文件格式：
EOT：Embedded OpenType Fonts
微软开发的用于嵌入网页中的字体，IE专用字体。

WOFF：The Web Open Font Format
Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本。2009年被开发，如今被W3C组织推荐标准。

TTF：TrueType Fonts
1980s，由Microsoft和Apple联合开发的一套字体标准，是Mac OS和WIN操作系统中最常见的一种字体。

SVG：SVG Fonts
用于SVG字体渲染的一种格式，它是由W3C制定的开放标准的图形格式。

2.优点

1）自由变化大小

2）自由修改颜色

3）可以添加一些视觉效果如：阴影、旋转、透明度。

4）兼容IE6

3.推荐icon网站

1） icomoon
Icon Font & SVG Icon Sets ❍ IcoMoon,Pixel Perfect Icon Solutions
SVG字体和图标图标集❍icomoon，图标像素的完美解决方案
https://icomoon.io

2） iconfont，阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
http://www.iconfont.cn/plus

3） Font Awesome，为 Bootstrap 而创造的图标字体
http://www.bootcss.com/p/font-awesome

注：字体编码属于16位进制，需注意书写规范，&#，分号；，一个不能少，否则会在ie8下出现打印图标，显示不符问题。

<i class="iconfont">&#33;</i>

三、font+CSS（font-class引用）

结合css伪元素，将小图标对应的html代码，写入样式中，调用即可。

1.技术要点

1）@font-face

2）css伪元素

/*16进制，需加'\'*/
.icon-open:before {
    content: "\e605";
}

before伪元素
伪元素：创建一个虚假的元素，并插入到目标元素内容之前

四、三种图标字体的比较

	CSS Sprite	font+HTML	font+CSS
原理	背景图片定位	@font-face	@font-face
兼容性	完美	完美	不支持IE低版本
图标颜色	丰富	单一	单一
缩放	失真	高清	高清
后期维护	困难	简单	简单
使用率	高	一路看涨	一路看涨