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;