快速上手製作Icon Font

現在在提起icon font，已經不是什麼新鮮的詞彙了，網上已經有很多介紹它的文章，並且很多**也已經將它用到，本篇主要是將製作icon font的整個流程整理一下，並且加入了自己在製作中遇到的問題，使得大家可以在今後使用的時候可以很快上手並且避免這些問題。

我認為，我們現在通常所指的icon font，是用字型檔案取代檔案，來展示圖示、特殊字型等元素的方法。

首先它的體積要比小的多

不僅體積小，而且還具有更好的可維護性（因為是向量，所以拉伸不變形；顏色可以自行更換，支援一些css3對文字的效果）

並且還可以通過base64置於css內，從而不產生的http請求

當然，icon font也是有缺點的，由於是字型，所以只支援上是純色的，多種顏色的就不支援了

但是在win8下大量的純色圖示的出現，是否是icon font可以普及的乙個機會呢？

雖然製作icon font自然而然要增加重構的成本，但是跟後期維護相比還是值得的在製作之前我們要知道需要什麼工具，其實很簡單，只需要fontcreator，ps這兩個工具即可。

通過分析現在開發的流程以及專案，用第一種方法在html中直接輸入是比較合適的。

當然了，我們輸入的時候怎麼去知道要輸入的字元是我要輸入的icon呢？只需要通過查閱unicode對照表，根據字型製作軟體中的unicode碼進行對比即可。

我們製作icon font是為了自己之後使用的，因為乙個方便管理並且使用的html元件頁面是必不可少的，其中應該包括對icon的描述、所對應的**等等這些資訊，目的就是在自己或者同事使用的時候可以很方便。

在製作icon font的過程中，自己也遇到了一些問題

跨域問題，這個屬於老生常談了，通過配置自己的伺服器或者放在同域下都可以解決，還可以使用base64置入css中。

如果從ps匯出的png24在匯入字型檔案的時候發生了變形，可以嘗試把ps中的向量圖等比拉大後在存成png24匯入。

**：