三年前，有一個(gè)設(shè)計(jì)師面試一位 Web 前端工程師，其中有一段這樣的對(duì)話：

“如果設(shè)計(jì)師希望用圖片實(shí)現(xiàn)某個(gè)字體樣式，而從技術(shù)的角度來說這樣不合理，但設(shè)計(jì)師非常堅(jiān)持，這時(shí)候你怎么辦？”

“我會(huì)給設(shè)計(jì)師講解工程上面臨的問題，爭(zhēng)取他理解。例如：如果文本使用圖片，以騰訊站點(diǎn)的訪問量來說，這里會(huì)需要消耗大量的服務(wù)器資源，至少需要增加 XXX 臺(tái)服務(wù)器，帶寬流量消耗 XXX 萬”。

這是一段真實(shí)的面試場(chǎng)景，而我就是那位被面試者。這些年 Web 前端技術(shù)在迅猛的發(fā)展，這樣的問題已經(jīng)有了解決方案——WebFont，如果再回到當(dāng)年面試的場(chǎng)景，我會(huì)給出更好的答案。

WebFont 技術(shù)可以讓網(wǎng)頁使用在線字體，而無需使用圖片，從而有機(jī)會(huì)解決開頭設(shè)計(jì)師提到的問題。它通過 CSS 的 @font-face 語句引入在線字體，使用 CSS 選擇器指定運(yùn)用字體的文本，與此同時(shí)專用于 Web 展示的 woff 格式字體也得到各大瀏覽器廠商支持，進(jìn)一步減少了字體的體積。在國(guó)外，WebFont 已經(jīng)非常流行了，大量的網(wǎng)站使用了 WebFont 技術(shù)，而業(yè)界大佬 Google 也順勢(shì)推出的免費(fèi) WebFont 云托管服務(wù)，這一切均帶動(dòng)了國(guó)外字體制作行業(yè)的高速發(fā)展。

一、WebFont 的優(yōu)勢(shì)

相對(duì)圖片，WebFont 有如下優(yōu)勢(shì)：

1. 支持選中、復(fù)制
2. 支持 Ctrl+F 查找
3. 對(duì)搜索引擎友好
4. 支持工具翻譯
5. 支持無障礙訪問，支持朗讀
6. 字體是矢量圖形，支持矢量縮放，自動(dòng)適配高清屏
7. 文本修改方便
8. 字形可以重復(fù)利用，節(jié)省網(wǎng)絡(luò)資源

二、中文 WebFont 的困境

既然 WebFont 有如此多優(yōu)勢(shì)，為何中文站點(diǎn)依然很少采用？這里主要是三個(gè)“中國(guó)特色”造成的：

1、中文字體體積

英文只有 26 個(gè)字母，一套字體不過幾十 KB；而漢字卻有數(shù)萬個(gè)，導(dǎo)致字體文件通常有好幾 MB 大小，文件體積比英文字體大數(shù)百倍，按照中國(guó)網(wǎng)絡(luò)環(huán)境的現(xiàn)狀，用于實(shí)際項(xiàng)目中顯然不現(xiàn)實(shí)。

2、瀏覽器類型

國(guó)內(nèi)瀏覽器市場(chǎng)異常繁榮，從 IE6 到各種殼的瀏覽器，他們對(duì)字體格式的支持也不一樣，字體格式轉(zhuǎn)換相當(dāng)繁瑣。

3、操作系統(tǒng)

相當(dāng)長(zhǎng)的時(shí)期內(nèi)，Windows XP 操作系統(tǒng)是國(guó)內(nèi)的主流，而 XP 系統(tǒng)對(duì)字體渲染表現(xiàn)差勁，設(shè)計(jì)師難以接受 WebFont 的表現(xiàn)，而寧愿使用圖片。不過隨著 XP 系統(tǒng)市場(chǎng)份額急劇下降以及移動(dòng)設(shè)備的崛起，這個(gè)問題已經(jīng)變得不再那么重要了。

總結(jié)一下，中文 WebFont 首要解決的問題便是：壓縮與轉(zhuǎn)碼。

三、現(xiàn)有的中文 WebFont 解決方案

1. 本地制作

通過字體制作工具來刪除沒有使用的字符，即制作精簡(jiǎn)版字體，這也是我之前實(shí)踐過的方案。

（圖：字體制作工具——FontLab）

2. 字體云服務(wù)

國(guó)內(nèi)目前有兩家公司提供中文 WebFont 云托管服務(wù)，他們能夠壓縮與轉(zhuǎn)碼字體：

• http://www. （有字庫）
• http://cn. （就是字）

三、現(xiàn)有方案的問題

1. 在實(shí)踐中，通過工具制作精簡(jiǎn)版字體異常繁瑣，它需要仔細(xì)核對(duì)字符，修改非常麻煩，效率低下且容易遺漏字符而導(dǎo)致出錯(cuò)
2. 第三方云服務(wù)最大的問題是無法保證穩(wěn)定性，能否支撐海量用戶訪問還是個(gè)問號(hào)，至少目前這兩家中文 WebFont 平臺(tái)中還沒有大型商業(yè)站點(diǎn)的案例，大多都是一些小型個(gè)人或企業(yè)網(wǎng)站在使用

四、本地自動(dòng)化 WebFont 壓縮設(shè)想

出于性能以及可控性的考慮，我們排除了第三方云服務(wù)方案，嘗試設(shè)計(jì)本地自動(dòng)化方案。和小伙伴討論的過程中，我們想到了之前有同事做過自動(dòng)化切圖的工具，原理是用腳本操作 Photoshop，那么我們是否同樣可以編寫腳本讓字體工具自動(dòng)化的操作呢？理論上 OK，值得我們?nèi)L試。

字體壓縮關(guān)鍵在于刪除不必要的字符，我們可以指定一個(gè)配置文件來指定字體以及其所使用的字符，然后操作字體工具精簡(jiǎn)字體即可。

前面提到，如果手工配置字體所使用的字符可能會(huì)遺漏，這里也能否實(shí)現(xiàn)自動(dòng)化的提??？

靈感總是在不經(jīng)意間出現(xiàn)，我們將目光又朝向了 CSS，因?yàn)?CSS 本身就一個(gè)完整的配置文件：它的 @font-face 語句記錄著字體名稱與文件路徑，選擇器記錄著字體使用范圍，而 CSS 選擇器又與 HTML 文檔相對(duì)應(yīng)，HTML 文檔又可以使用選擇器來查找節(jié)點(diǎn)與文本。

五、字蛛（Font-Spider）誕生

為了實(shí)現(xiàn)上述設(shè)想，我們需要擁有這三個(gè)小伙伴：

• 分析模塊：負(fù)責(zé)收集字體與字體使用的字符
• 壓縮模塊：負(fù)責(zé)刪除字體中沒有使用的字符實(shí)現(xiàn)壓縮
• 轉(zhuǎn)碼模塊：負(fù)責(zé)將字體轉(zhuǎn)換成跨瀏覽器使用的格式

借助開源的力量，工具的 Demo 版本被迅速的實(shí)現(xiàn)出來。感謝以下開源項(xiàng)目：

• css.js：它能將 CSS 解析成語法樹，并且能夠較好的容錯(cuò)適應(yīng)各種 hack 語法
• jsdom：它能夠在 NodeJS 中實(shí)現(xiàn) W3C DOM API，使得我可以使用 document.querySelectorAll() 方法輸入 CSS 選擇器來查找 HTML 節(jié)點(diǎn)上的文本
• font-optimizer：這是一個(gè)使用 Perl 編寫的字體優(yōu)化工具，可以高效的刪除字體中指定的字符
• ttf2eot、ttf2woff、ttf2svg：是它們完成了跨瀏覽器字體格式轉(zhuǎn)碼的工作

成果

指定 HTML 文件路徑就可以自動(dòng)化的壓縮與轉(zhuǎn)碼字體，過程中完全無需人工干預(yù)，可以方便的集成在前端發(fā)布系統(tǒng)中。

開源

不斷的完善后，我們將工具命名為——字蛛（Font-Spider），并回饋給開源社區(qū)，希望它能夠?yàn)橹形?WebFont 的發(fā)展出一份力，讓更多的中文站點(diǎn)可以使用精美的字體。套用一句話來結(jié)束本文：技術(shù)方案會(huì)遲到，但從不會(huì)缺席。