我是一個前端程序員，我有一個夢想，我希望我的網頁在不同的顯示器上表現一致，我很任性，我不喜歡用什么雪碧圖去設置position來放小圖標。我喜歡設計，我每次都會在高清圖和分辨率之間拉扯。但是，孔子曾經說過
不會設計的前端不是好小伙，不學習新東西的男人不是小能手
而我總是以各種小能手自居，所以我就希望我活在一個矢量的網頁世界里，這里沒有毛邊，一切都是那么的清晰，這里沒有雪碧，所有的圖標放置都是那么簡單，都是那么容易。于是，我搜索整個互聯網，終于為尋求矢量網頁的我交出了一份滿意的答卷。
設計要求
我很討厭復雜的東西，現在的web都朝著簡潔易用的方向前進，都朝著內容為王前進，所以首先我希望咱們的網站設計至少是簡潔易行的。這是咱們實現網站矢量化的基礎。
工具們
俗話說得好，工欲善其事必先利其器，我們的網站矢量化需要一些工具支持
- Icomoon
- Adobe Illustor
- Font Spider
挨個說明一下各個工具的用途
Icomoon
官網地址: https://icomoon.io/
這是個什么工具？
再多的語言也沒法表達我對這個網站的喜愛。這是一個簡單、簡潔的線上字體生成工具IcoMoon App
主頁沒什么好多做介紹的，是一些IcoMoon表屬性的文字。
需要注意的是他的主頁實際上就是一個很好的Demo，整個網頁的所有小圖標都是一個個的
span標簽，分別對應上不同的Class就出現了不同的圖標
實際上這些圖標都是基于@font-face實現的，這個不太清楚的可以自行谷歌，自從CSS3支持自定義字體之后國外的網頁設計師都如釋重負，他們終于可以天馬行空地使用各種自己喜歡的字體進行網頁設計，再也不需要用那些早就過時的系統默認字體
至于為什么強調國外的設計師解放了，后邊會講到原因。
現在我們一起看他的IconMoon App：
首先我們觀察到整個功能區實際上如圖所示被分成了三個部分：
- 頭部
- 主體
- 底部
你會認為這樣的安排千篇一律，但是也正是這樣我認為他的易用性超乎尋常。功能區如圖：
實際上這個工具的使用很簡單，咱們分幾步走就OK
- 引入圖片字體庫
- 點亮自己需要的字體
- 切換到
Generate Fonts選項卡 - 點擊
Download
你會發現很快一個Icomoon的zip壓縮包就被下載下來了，里面有這么幾個文件
Icomoon.zip
┗ demo.html
┗ demo-files
┗ domo.css
┗ demo.js
┗ style.css
┗ fonts
┗ icomoon.woff
┗ icomoon.ttf
┗ icomoon.svg
┗ icomoon.eot
┗ seclection.json
┗ README.txt
-
demo.html 是
演示網頁,他是個響應式網站，其源碼中對我們有用處的部分就是style.css這么一個外鏈，里面是所有自定義字體的聲明和類。 - fonts文件夾 里面放置了四個字體格式，可以完全兼容所有主流瀏覽器。
-
selection.json 這是一個數據文件，里面放置的是本次下載所有圖標字體和他的名稱對應的鍵值對,今后如果你需要在現有字體基礎上增加新字體就完全不需要再“從頭找起”，直接
Import Icons選擇這個json文件就可以直接將現有的字體文件選中，大大節約時間。
然后，我們怎樣將圖標字體應用到生產環境呢？
- 將fonts文件夾和style.css移動到你項目的style 文件夾下
- 在頁面的
head標簽插入link引入style.css - 在頁面里插入一個字體圖標，可以使用這種方式:
code:
<div>
<span>
<i class="icon-security"></i>
<span class="icon-security></span>
</span>
</div>
實際上我推薦你將style.css重命名為fonticon.css，更便于理解，并且注意，style.css和fonts文件夾的相對位置。至于如何知道哪一個圖標對應的class，demo.html會有內容，他們的名字有一定的語義(比如icon-security)就是一個代表"安全"的盾牌。他們都是以
icon-開頭
實際上，這個下載包的ttf字體是可以安裝到系統的，我們可以在設計原型的時候去挑選字體圖標，這樣更便于設計的實現，并且很省時間。
這時就會出現問題：
如果我需要的一個圖標，Icomoon很不爭氣地沒有，或者說需要購買，那我們怎么辦呢？
這是就需要我們強大的矢量編輯器Adobe Illustrator粉墨登場。當然這個實現的前提就是偉大的Icomoon支持導入svg文件生成字體，這大大增加了他的實用性的定制性。
下面我就以一個很簡單的例子演示，至于有多簡單。
- 首先，在AI新建一個文件，取名logo.svg(icomoon字體里不會有你公司的logo吧).
- 這方面設計繪圖，交給美工來施展，我隨意一劃，不知道哪個公司的logo
- 選中全部路徑，點擊“編組”。
- 保存文件，打開IcoMoon App
- 點擊
Import Icons在文件選擇對話框里選擇咱們剛才的logo.svg - 載入完成之后在主區域就會有一個“”的分組，所有的自定義都在這里
- 點亮選中，生成字體
需要注意，這個文件的命名最好是有語義的，因為下載下來的Icomoon字體包這個圖標對應的class默認是
icon-文件名,類似于 Untitle/Unknown/asd/qazws 之類的沒有語義的命名不要用。（自定義的比較少還可以到class中辨認或者修改，多了怎么辦？）
而AI的使用，有這么幾個注意點
- 最后路徑必須閉合，如果不閉合那生成的就不是一個字體，而是若干個路徑，使用相當不便捷，類似：
<span class="icon-plan">
<span class="icon-plan1"></span>
<span class="icon-plan2"></span>
<span class="icon-plan3"></span>
</span>- 文件可以有顏色，描邊填充都是可以的，但是這樣使用范圍較窄，不建議用在公用性質的圖標上。
這樣，我們使用IconMoon工具和AI就完成了所有網站小圖標的矢量化，使用便捷簡單，大小顏色更換隨心所欲，HTTP請求一次，比雪碧圖劃算多了。
但是有人提問了：
如果我希望網站的標題是一個比較特殊的字體（比如菱心字體或者是書法字體）怎么辦？
這個很簡單。直接放到圖片里嘛 ~或者你直接用字體不就OK？！
這個當然是開玩笑，放圖片確實靠譜但是別忘了咱們的目的是“網頁矢量化”，所以直接引入字體就OK了，和之前的一樣@font-face定義然后用font-family使用就OK
但是實際上，很少有哪個網站為了一個文章的標題引入一個中文字體。因為中華文化博大精深，但凡一個覆蓋常用文字的字體就動輒十幾M幾十M，為了小小一個字體犧牲了網頁的瀏覽速度，得不償失。
這個問題目前得到了解決，就是咱們接下來的主角字蛛
Font-Spider
官網地址: http://font-spider.org/
這是騰訊ISUX團隊的作品。向大神們致敬。
正如官網所言，Font Spider是一個“中文字體壓縮工具”，他的工作原理是遍歷引用自定義字體的節點找出已經使用的文字，然后將這些文字對應的字體拆分出來。不同的引用字體最終會被合并成跨瀏覽器的最終字體
安裝前提：NodeJS
windows 下還需要perl
然后執行命令：
npm install font-spider -g
生產完成后，終端運行：
$ font-spider ./demo/*.html
用到的所有字體都會自動打包成woff/svg/eot/ttf格式，兼容性良好，之前的源字體會被備份。
如此一來，目前所有的中文標題、文本字體、網站各種小圖標、大圖標都可以實現矢量化，甚至有些符號你可以把字號放大顏色放淺作為背景，從而實現網站的矢量化。這樣一來的優點:
- 不存在兼容性問題
- 小圖標的放置、更改、動畫都更加得心應手
- 完美適配 Retina 屏幕
- 加快網頁加載速度
結語：
網站矢量化是大勢所趨，你可以查看一下淘寶天貓等很多的高級網站現在都已經使用字體圖標來進行頁面安排，它使得生產更加簡單便捷，用CSS3做交互動畫簡直完美。
相關鏈接：
以下內容更新于2015/2/22
實際上，我有了另外一個考量。
是不是可以在AI中寫出標題之后導出為svg，然后再通過IcoMoon轉換成字體的一部分，那不也是另外一個解決方案嗎？這兩個方案我不太清楚性能優劣性，但是從難易角度來說相比現在這種更省事，因為
- 不需要跑頁面，實際上頁面并不一定處于同一文件夾，Font-Spider還是有使用不當
- 特殊字體基本應用較少，但是可能是多個字體，選擇也是問題
- 一次性的解決方案
- 可以對文字進行相對隨意簡單的變形設計
我在ai里用造字工房勁黑字體寫了幾個字，稍微加了一個修飾性的三角號，進行字體導入之后結果出乎我的意料
肉眼可見的是我的文字們都掛掉了，可見的只有這個孤零零的小三角。發生了啥？
實際上這和我在AI中的疑問相同:字體輸入之后我并沒有找到文字的錨，沒辦法直接修改文字，也就是說此時的文字并不是路徑。
所以現在我們需要解決的問題是將文字轉化成路徑。怎樣解決呢？
用鋼筆描！
簡直不能更心酸。這樣做完全沒有生產力可言。
當然我也呼吁所有的VI設計和Web設計們把比較特殊的文件給出矢量路徑，可以為后期的網頁制作鋪墊，哪怕不用矢量，這種形式的原型也是有優勢的。
解決方案其實很簡單。確保目前是“鋼筆工具”，菜單欄有“文字”菜單，點擊之后選擇創建輪廓（Mac快捷鍵Command+shift+o）
如此操作之后我們就可以通過操作錨點來進行文字變形了，最后別忘了編組輸出svg
也就是說這條路目前是完全可行的，但是我有一些考慮：
實際上這樣子出來的文字和平時網站引入的字體已經不處在同一個字號維度了，普通的定寬頁面解決方案這樣是OK，可是如果做響應式以后應該怎么做？字號的變換比例究竟怎樣做？以后是要研究一下的。
