我是一個(gè)前端程序員，我有一個(gè)夢(mèng)想，我希望我的網(wǎng)頁(yè)在不同的顯示器上表現(xiàn)一致，我很任性，我不喜歡用什么雪碧圖去設(shè)置position來(lái)放小圖標(biāo)。我喜歡設(shè)計(jì)，我每次都會(huì)在高清圖和分辨率之間拉扯。但是，孔子曾經(jīng)說(shuō)過(guò)

不會(huì)設(shè)計(jì)的前端不是好小伙，不學(xué)習(xí)新東西的男人不是小能手

而我總是以各種小能手自居，所以我就希望我活在一個(gè)矢量的網(wǎng)頁(yè)世界里，這里沒(méi)有毛邊，一切都是那么的清晰，這里沒(méi)有雪碧，所有的圖標(biāo)放置都是那么簡(jiǎn)單，都是那么容易。于是，我搜索整個(gè)互聯(lián)網(wǎng)，終于為尋求矢量網(wǎng)頁(yè)的我交出了一份滿意的答卷。

設(shè)計(jì)要求

我很討厭復(fù)雜的東西，現(xiàn)在的web都朝著簡(jiǎn)潔易用的方向前進(jìn)，都朝著內(nèi)容為王前進(jìn)，所以首先我希望咱們的網(wǎng)站設(shè)計(jì)至少是簡(jiǎn)潔易行的。這是咱們實(shí)現(xiàn)網(wǎng)站矢量化的基礎(chǔ)。

工具們

俗話說(shuō)得好，工欲善其事必先利其器，我們的網(wǎng)站矢量化需要一些工具支持

• Icomoon
• Adobe Illustor
• Font Spider

挨個(gè)說(shuō)明一下各個(gè)工具的用途

Icomoon

官網(wǎng)地址: https://icomoon.io/

這是個(gè)什么工具？

再多的語(yǔ)言也沒(méi)法表達(dá)我對(duì)這個(gè)網(wǎng)站的喜愛(ài)。這是一個(gè)簡(jiǎn)單、簡(jiǎn)潔的線上字體生成工具IcoMoon App
主頁(yè)沒(méi)什么好多做介紹的，是一些IcoMoon表屬性的文字。

需要注意的是他的主頁(yè)實(shí)際上就是一個(gè)很好的Demo，整個(gè)網(wǎng)頁(yè)的所有小圖標(biāo)都是一個(gè)個(gè)的span標(biāo)簽，分別對(duì)應(yīng)上不同的Class就出現(xiàn)了不同的圖標(biāo)

實(shí)際上這些圖標(biāo)都是基于@font-face實(shí)現(xiàn)的，這個(gè)不太清楚的可以自行谷歌，自從CSS3支持自定義字體之后國(guó)外的網(wǎng)頁(yè)設(shè)計(jì)師都如釋重負(fù)，他們終于可以天馬行空地使用各種自己喜歡的字體進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，再也不需要用那些早就過(guò)時(shí)的系統(tǒng)默認(rèn)字體

至于為什么強(qiáng)調(diào)國(guó)外的設(shè)計(jì)師解放了，后邊會(huì)講到原因。

現(xiàn)在我們一起看他的IconMoon App：

首先我們觀察到整個(gè)功能區(qū)實(shí)際上如圖所示被分成了三個(gè)部分：

• 頭部
• 主體
• 底部

你會(huì)認(rèn)為這樣的安排千篇一律，但是也正是這樣我認(rèn)為他的易用性超乎尋常。功能區(qū)如圖：

主功能區(qū)注解

實(shí)際上這個(gè)工具的使用很簡(jiǎn)單，咱們分幾步走就OK

1. 引入圖片字體庫(kù)
2. 點(diǎn)亮自己需要的字體
3. 切換到Generate Fonts選項(xiàng)卡
4. 點(diǎn)擊Download

引入其他字體庫(kù)

你會(huì)發(fā)現(xiàn)很快一個(gè)Icomoon的zip壓縮包就被下載下來(lái)了，里面有這么幾個(gè)文件

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 是演示網(wǎng)頁(yè),他是個(gè)響應(yīng)式網(wǎng)站，其源碼中對(duì)我們有用處的部分就是style.css這么一個(gè)外鏈，里面是所有自定義字體的聲明和類(lèi)。
• fonts文件夾 里面放置了四個(gè)字體格式，可以完全兼容所有主流瀏覽器。
• selection.json 這是一個(gè)數(shù)據(jù)文件，里面放置的是本次下載所有圖標(biāo)字體和他的名稱對(duì)應(yīng)的鍵值對(duì),今后如果你需要在現(xiàn)有字體基礎(chǔ)上增加新字體就完全不需要再“從頭找起”，直接Import Icons選擇這個(gè)json文件就可以直接將現(xiàn)有的字體文件選中，大大節(jié)約時(shí)間。

然后，我們?cè)鯓訉D標(biāo)字體應(yīng)用到生產(chǎn)環(huán)境呢？

1. 將fonts文件夾和style.css移動(dòng)到你項(xiàng)目的style 文件夾下
2. 在頁(yè)面的head標(biāo)簽插入link引入style.css
3. 在頁(yè)面里插入一個(gè)字體圖標(biāo)，可以使用這種方式:

code:

<div>
    <span>
        <i class="icon-security"></i>
        <span class="icon-security></span>
    </span>
</div>

實(shí)際上我推薦你將style.css重命名為fonticon.css，更便于理解，并且注意，style.css和fonts文件夾的相對(duì)位置。至于如何知道哪一個(gè)圖標(biāo)對(duì)應(yīng)的class，demo.html會(huì)有內(nèi)容，他們的名字有一定的語(yǔ)義(比如icon-security)就是一個(gè)代表"安全"的盾牌。他們都是以icon-開(kāi)頭

實(shí)際上，這個(gè)下載包的ttf字體是可以安裝到系統(tǒng)的，我們可以在設(shè)計(jì)原型的時(shí)候去挑選字體圖標(biāo)，這樣更便于設(shè)計(jì)的實(shí)現(xiàn)，并且很省時(shí)間。
這時(shí)就會(huì)出現(xiàn)問(wèn)題：

如果我需要的一個(gè)圖標(biāo)，Icomoon很不爭(zhēng)氣地沒(méi)有，或者說(shuō)需要購(gòu)買(mǎi)，那我們?cè)趺崔k呢？

這是就需要我們強(qiáng)大的矢量編輯器Adobe Illustrator粉墨登場(chǎng)。當(dāng)然這個(gè)實(shí)現(xiàn)的前提就是偉大的Icomoon支持導(dǎo)入svg文件生成字體，這大大增加了他的實(shí)用性的定制性。
下面我就以一個(gè)很簡(jiǎn)單的例子演示，至于有多簡(jiǎn)單。

1. 首先，在AI新建一個(gè)文件，取名logo.svg(icomoon字體里不會(huì)有你公司的logo吧).
2. 這方面設(shè)計(jì)繪圖，交給美工來(lái)施展，我隨意一劃，不知道哪個(gè)公司的logo
3. 選中全部路徑，點(diǎn)擊“編組”。
4. 保存文件，打開(kāi)IcoMoon App
5. 點(diǎn)擊Import Icons在文件選擇對(duì)話框里選擇咱們剛才的logo.svg
6. 載入完成之后在主區(qū)域就會(huì)有一個(gè)“”的分組，所有的自定義都在這里
7. 點(diǎn)亮選中，生成字體

使用AI創(chuàng)建圖形并編組路徑

引入SVG文件后的分組地點(diǎn)

需要注意，這個(gè)文件的命名最好是有語(yǔ)義的，因?yàn)橄螺d下來(lái)的Icomoon字體包這個(gè)圖標(biāo)對(duì)應(yīng)的class默認(rèn)是icon-文件名,類(lèi)似于 Untitle/Unknown/asd/qazws 之類(lèi)的沒(méi)有語(yǔ)義的命名不要用。（自定義的比較少還可以到class中辨認(rèn)或者修改，多了怎么辦？）

各類(lèi)屬性設(shè)置

不常用屬性設(shè)置

而AI的使用，有這么幾個(gè)注意點(diǎn)

• 最后路徑必須閉合，如果不閉合那生成的就不是一個(gè)字體，而是若干個(gè)路徑，使用相當(dāng)不便捷，類(lèi)似：
  <span class="icon-plan">
  <span class="icon-plan1"></span>
  <span class="icon-plan2"></span>
  <span class="icon-plan3"></span>
  </span>
• 文件可以有顏色，描邊填充都是可以的，但是這樣使用范圍較窄，不建議用在公用性質(zhì)的圖標(biāo)上。

這樣，我們使用IconMoon工具和AI就完成了所有網(wǎng)站小圖標(biāo)的矢量化，使用便捷簡(jiǎn)單，大小顏色更換隨心所欲，HTTP請(qǐng)求一次，比雪碧圖劃算多了。

但是有人提問(wèn)了：

如果我希望網(wǎng)站的標(biāo)題是一個(gè)比較特殊的字體（比如菱心字體或者是書(shū)法字體）怎么辦？

這個(gè)很簡(jiǎn)單。直接放到圖片里嘛 ~或者你直接用字體不就OK？！

這個(gè)當(dāng)然是開(kāi)玩笑，放圖片確實(shí)靠譜但是別忘了咱們的目的是“網(wǎng)頁(yè)矢量化”，所以直接引入字體就OK了，和之前的一樣@font-face定義然后用font-family使用就OK

但是實(shí)際上，很少有哪個(gè)網(wǎng)站為了一個(gè)文章的標(biāo)題引入一個(gè)中文字體。因?yàn)橹腥A文化博大精深，但凡一個(gè)覆蓋常用文字的字體就動(dòng)輒十幾M幾十M，為了小小一個(gè)字體犧牲了網(wǎng)頁(yè)的瀏覽速度，得不償失。

這個(gè)問(wèn)題目前得到了解決，就是咱們接下來(lái)的主角字蛛

Font-Spider

官網(wǎng)地址: http://font-spider.org/

這是騰訊ISUX團(tuán)隊(duì)的作品。向大神們致敬。

正如官網(wǎng)所言，F(xiàn)ont Spider是一個(gè)“中文字體壓縮工具”，他的工作原理是遍歷引用自定義字體的節(jié)點(diǎn)找出已經(jīng)使用的文字，然后將這些文字對(duì)應(yīng)的字體拆分出來(lái)。不同的引用字體最終會(huì)被合并成跨瀏覽器的最終字體

安裝前提：NodeJS

windows 下還需要perl

然后執(zhí)行命令：

npm install font-spider -g

生產(chǎn)完成后，終端運(yùn)行：

$ font-spider ./demo/*.html

用到的所有字體都會(huì)自動(dòng)打包成woff/svg/eot/ttf格式，兼容性良好，之前的源字體會(huì)被備份。

如此一來(lái)，目前所有的中文標(biāo)題、文本字體、網(wǎng)站各種小圖標(biāo)、大圖標(biāo)都可以實(shí)現(xiàn)矢量化，甚至有些符號(hào)你可以把字號(hào)放大顏色放淺作為背景，從而實(shí)現(xiàn)網(wǎng)站的矢量化。這樣一來(lái)的優(yōu)點(diǎn):

1. 不存在兼容性問(wèn)題
2. 小圖標(biāo)的放置、更改、動(dòng)畫(huà)都更加得心應(yīng)手
3. 完美適配 Retina 屏幕
4. 加快網(wǎng)頁(yè)加載速度

結(jié)語(yǔ)：

網(wǎng)站矢量化是大勢(shì)所趨，你可以查看一下淘寶天貓等很多的高級(jí)網(wǎng)站現(xiàn)在都已經(jīng)使用字體圖標(biāo)來(lái)進(jìn)行頁(yè)面安排，它使得生產(chǎn)更加簡(jiǎn)單便捷，用CSS3做交互動(dòng)畫(huà)簡(jiǎn)直完美。

相關(guān)鏈接：

IcoMoon官網(wǎng)

CSS3自定義字體使用

NodeJS安裝

windows下perl安裝

字蛛官網(wǎng)

站長(zhǎng)之家字體下載

windows下字體管家軟件

以下內(nèi)容更新于2015/2/22

實(shí)際上，我有了另外一個(gè)考量。

是不是可以在AI中寫(xiě)出標(biāo)題之后導(dǎo)出為svg，然后再通過(guò)IcoMoon轉(zhuǎn)換成字體的一部分，那不也是另外一個(gè)解決方案嗎？這兩個(gè)方案我不太清楚性能優(yōu)劣性，但是從難易角度來(lái)說(shuō)相比現(xiàn)在這種更省事，因?yàn)?/p>

1. 不需要跑頁(yè)面，實(shí)際上頁(yè)面并不一定處于同一文件夾，F(xiàn)ont-Spider還是有使用不當(dāng)
2. 特殊字體基本應(yīng)用較少，但是可能是多個(gè)字體，選擇也是問(wèn)題
3. 一次性的解決方案
4. 可以對(duì)文字進(jìn)行相對(duì)隨意簡(jiǎn)單的變形設(shè)計(jì)

我在ai里用造字工房勁黑字體寫(xiě)了幾個(gè)字，稍微加了一個(gè)修飾性的三角號(hào)，進(jìn)行字體導(dǎo)入之后結(jié)果出乎我的意料

AI 中的現(xiàn)實(shí)效果

IcoMoon 導(dǎo)入效果

肉眼可見(jiàn)的是我的文字們都掛掉了，可見(jiàn)的只有這個(gè)孤零零的小三角。發(fā)生了啥？

實(shí)際上這和我在AI中的疑問(wèn)相同:字體輸入之后我并沒(méi)有找到文字的錨，沒(méi)辦法直接修改文字，也就是說(shuō)此時(shí)的文字并不是路徑。

所以現(xiàn)在我們需要解決的問(wèn)題是將文字轉(zhuǎn)化成路徑。怎樣解決呢？

用鋼筆描！

簡(jiǎn)直不能更心酸。這樣做完全沒(méi)有生產(chǎn)力可言。

當(dāng)然我也呼吁所有的VI設(shè)計(jì)和Web設(shè)計(jì)們把比較特殊的文件給出矢量路徑，可以為后期的網(wǎng)頁(yè)制作鋪墊，哪怕不用矢量，這種形式的原型也是有優(yōu)勢(shì)的。

解決方案其實(shí)很簡(jiǎn)單。確保目前是“鋼筆工具”，菜單欄有“文字”菜單，點(diǎn)擊之后選擇創(chuàng)建輪廓（Mac快捷鍵Command+shift+o）

使用字體工具轉(zhuǎn)換成輪廓

如此操作之后我們就可以通過(guò)操作錨點(diǎn)來(lái)進(jìn)行文字變形了，最后別忘了編組輸出svg

轉(zhuǎn)換后更改錨點(diǎn)位置修改

IcoMoon 導(dǎo)入效果

也就是說(shuō)這條路目前是完全可行的，但是我有一些考慮：

實(shí)際上這樣子出來(lái)的文字和平時(shí)網(wǎng)站引入的字體已經(jīng)不處在同一個(gè)字號(hào)維度了，普通的定寬頁(yè)面解決方案這樣是OK，可是如果做響應(yīng)式以后應(yīng)該怎么做？字號(hào)的變換比例究竟怎樣做？以后是要研究一下的。