iconfont字体图标的使用

前言：

        在做一张页面时，需要用到许多图标，学习了阿里巴巴iconfont图标的使用，总结如下。（只是关于使用方面，至于图标的制作和上传可以参照官网）

1、首先在Iconfont-阿里巴巴矢量图标库上面将自己需要的图标点击购物车按钮添加进购物车。

2、选择“下载到本地”，得到一个压缩包，解压后里面有几个字体文档和demo   和css样式文档。

3、打开demo_unicode.html 可以看到每个图标的Unicode，把iconfon.css 和四个字体文档 复制一份到自己的项目文件夹下，就可以使用了

4、修改 iconfont.css 样式表

@charset "utf-8";

@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- */
}
/* 自此处定义了 .iconfont 样式  */
.iconfont {      
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;  
	-moz-user-select:none;  
}

5、挑选相应样式，并应用到页面中

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

6、备注，font-smoothing

W3C对于字体的抗锯齿渲染的规范应该是纠结过，比如在2002年将font-smooth列入了标准规范的草案中（参见：http://www.w3.org/TR/WD-font/#font-smooth），可惜的是，不同操作系统对文字的渲染存在差异，加上各个浏览器渲染引擎都有自己的一套算法保证抗锯齿字体的效果，后面的细节我不知道，总之，它从Web标准中被移除了。

但Webkit并未在自己的引擎中放弃对抗锯齿效果的调整支持，它自己推广了其自有的非标实现：

-webkit-font-smoothing:none | antialiased | subpixel-antialiased

可是实际使用发现，在Windows下区别并不太明显，原因是M$的ClearType技术调来调去区别不大（我是木眼），而且是全局的（一旦启用处处都用），但对于GDI+（Linux），可调整范围似乎更大些，看下Retina屏幕下1:1的截图表现：

对于平常应用，这类设置的差异更多关注的只是有/没有，然而当图标字体(Icon Fonts)成为一种趋势的时候，Gecko也坐不住了，推出了一个全新的非标定义，新到什么程度？Google都搜不到（因为官方文档仍然处于404时该特性就上线了）：

没错，正是-moz-osx-font-smoothing，其中-osx-表明这是mozilla难得的给特定操作系统推出的特性增强，由于缺乏文档，目前已知的取值是：

-moz-osx-font-smoothing: inherit | grayscale

设置grayscale对于图标字体表现更清晰，减轻次像素渲染带来的相邻像素色彩污染问题（但是不是会禁用硬件加速还有待考证）。

7、在chrome浏览器下放大出现锯齿的解决办法   

-webkit-text-stroke-width: 0.2px;