引自慕课网
用字体在网页上画ICON图标
当时字体图标不支持多色，但在2016-10中，阿里矢量图标平台支持多色矢量图标。
点击此处： iconfont阿里矢量图标平台iconfont全新推出
另一方面，CSS Sprite在国内称为“CSS Sprite”，也称为“CSS精灵”。
这也称为“图像合并”技术，是通过将网页中的一些零散的背景图像合并为一个图像文件，并将其放置在利用CSS背景图像显示的位置。
3358 www.Sina.com/1 (备份图像2 )备份位置http://www.Sina.com/1 )对于单个小图标，文件的体积和服务器需要另存为PNG-24的文件格式3 )颜色丰富的图标1.技术要点1 )需要确定每个图标的大小2 )需要注意小图标与小图标之间的距离3 )需要密切关注
2.特点1 ) @font-face /*font-face声明字体*/@ font-face { font-family 3360 ' icon font '； SRC:URL(iconfont.EOT )；/* ie9 */src : URL (icon font.eot？ # ie fix ' (format (嵌入式- opentype ) )、/* ie6-I E8 */URL (icon font.woff ) )、/*Chrommat /* chrome /* iOS 4.1- */}字体文件格式：
eot :嵌入式opentype fonts
微软开发的用于嵌入网页的字体，IE专用字体。
WOFF:The Web Open Font Format
是Web字体中最好的格式，他是开放TrueType/OpenType的压缩版本。 2009年开发，现在由W3C组织推荐标准。
TTF:TrueType Fonts
1980s是由微软和苹果共同开发的一组字体标准，是MAC操作系统和WIN操作系统中最常见的字体。
SVG:SVG Fonts
一种用于呈现SVG字体的格式，是由W3C制定的开放标准图形格式。
3.难点1 )自由改变大小2 )自由改变颜色3 )可以添加阴影、旋转、透明度等视觉效果。 4 )与IE6 1.技术要点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制作的图标字体
3358 www.boot CSS.com/p/font-awesome 3358 www.Sina.com/:字体代码为16位二进制，需要注意书写规范、#、分号；少不了一个。 否则，ie8下方将显示打印图标，并显示不一致问题。
i class='iconfont'#33； /i三、结合font css (参见font-class ) CSS伪元素，将小图标对应的html代码写入样式，调用即可。2.优点1 ) @font-face 2) css伪元素/*十六进制添加'' */. icon-open : before (content 3360 ' (e605 )
伪元素：创建伪元素并将其插入到目标元素内容之前
四、三种图标字体比较CSS Spritefont HTMLfont CSS原理背景图片定位@font-face@font-face兼容性不完美支持的IE低版本图标颜色丰富单一变焦失真高清后期维护困难简单