圖示字型的使用
1. 什麼是圖示字型
圖示字型是字型檔案，用符号和字形的輪廓代替标準的文字數字式字元。是專門為使用者界面設計，就像系統字型一樣，使用CSS@font-face在web浏覽器裡展示。使用圖示字型來生成圖示相對于基于圖檔的圖示來說，有如下的好處：
1.自由的變化大小
2.自由的修改顔色
3.添加陰影效果
4.IE6也可以支援
5.支援圖檔圖示的其它屬性，例如，透明度和旋轉等等
2. 如何使用圖示字型？
要想使用圖示字型，首先我們要有圖示字型檔案，我們以IcoMoon（http://icomoon.io/）網站為我們提供的開源圖示字型為例來講解如何使用。
我們在應用頁面http://icomoon.io/app/#/select。選擇我們需要的圖示字型：
然後點選
生成字型檔案：
這時可以看到我們剛剛選擇的幾個圖示字型已經生成，點選下載下傳此檔案後會得到icomoon.zip的檔案。解壓後會看到裡面有适合各個浏覽器的字型以及demo示範：
然後，你就可以依葫蘆畫瓢使用這些圖示形狀字型了
1.建立index.html
2.在style标簽裡輸入以下内容：
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE9*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/icomoon.ttf') format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('fonts/icomoon.woff') format('woff'), /* chrome、firefox */
url('fonts/icomoon.svg#icomoon') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
然後我們單獨為圖示字型設定iconfont類：
.iconfont{font-family:"icomoon";font-size:16px;font-style:normal;}
最後，在頁面<body>中使用這個字型：
<ul>
<li><i class="iconfont"></i> <a href="#">聯系我們</a></li>
<li><i class="iconfont"></i> <a href="#">設為首頁</a></li>
<li><i class="iconfont"></i> <a href="#">收藏本站</a></li>
<li><i class="iconfont"></i> <a href="#">工程案例</a></li>
<li><i class="iconfont"></i> <a href="#">關于我們</a></li>
</ul>
注：'' 代表的是解壓檔案裡有個style.css檔案裡的有content：“\e***”，把 '' 寫成“***;”
這裡我們采用了一對<i>标簽來盛放字型圖示， <i>是斜體的意思，我們可以利用樣式将其顯示為正常，當然你也可以用<span>等其他元素(建議使用span)，其目的就是利用一個容器來盛放字型圖示，然後通過樣式來定義其字型。這裡的等就是對應的圖示字型的轉義編碼。我們将其編碼與應用的圖示對應即可。
效果如下：
部落格中所涉及到的圖檔都有版權，請謹慎使用
這時可以看到我們剛剛選擇的幾個圖示字型已經生成，點選
下載下傳此檔案後會得到icomoon.zip的檔案。解壓後會看到裡面有适合各個浏覽器的字型以及demo示範：