用字体在网页中画icon图标

方法一：CSS+Sprite 

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

好处：减少文件体积和服务器请求次数，从而提高效率。

详细的见：http://blog.csdn.net/u013511989/article/details/47172241

方法二：font+HTML

1.灵活性：轻松的改变图标的颜色或其他CSS效果
2.可扩展：改变图标的大小，就像改变字体大小一样容易
3.矢量性：图标是矢量的，与像素无关，缩放图标不会影响清晰度
4.兼容性：字体图标支持所有现代浏览器（包括IE6）

5.本地使用：通过添加定制字体到本地系统，可以在各种不同的设计和编辑应用程序中使用它们。

IcoMoon  icomoon.io   自己制作flowerboys.cn

1.免费图标，免费应用程序
2.构建只包含您需要的图标
3.导入矢量图字体（SVG），而不会被上传到服务器

4.方便管理图标，除了生成字体，还可以声称SVG。

结果：

EOT 微软开发的用于嵌入网页的字体，IE专用字体
WOFF Web自体重最佳格式，他是一个开放的True Type/OpenType的压缩版本，被W3C推荐
TTF 1980有微软和苹果联合开发的一套字体标准，是Mac OS和WIN操作系统中最常见的一种字体
SVG 用于SVG字体渲染的一种格式，它是由W3C制定的开放标准的图形格式。

浏览器支持情况

自定义字体@font-face{font-family: src: 四个全引入url() format(),...}

format().eot("embedded-opentype").woff("woff").ttf("truetype").svg.svgz("svg")
引用字体，class的font-family，抗锯齿属性-webkit-font-smoothing:antialiased;-moz-osx-smoothing:grayscale，标签建@#*16进制
IE6-IE8错误解决办法：src url 中 eot后加？或者?#iefix
IE9兼容：src url中eot后不加任何东西。

方法三：font+CSS

before+content结合使用
eg:.icon-music:before{content:'\e605'}


批量生成css：before content样式直接生成
CSS Selector ：use a Class； use i(for selecting i)；

三种方法对比：