遲到的中文 WebFont

(前端工程師福音，收藏一下)

三年前，有一個設計師面試一位 Web 前端工程師，其中有一段這樣的對話：

「若是設計師但願用圖片實現某個字體樣式，而從技術的角度來講這樣不合理，但設計師很是堅持，這時候你怎麼辦？」

「我會給設計師講解工程上面臨的問題，爭取他理解。例如：若是文本使用圖片，以騰訊站點的訪問量來講，這裏會須要消耗大量的服務器資源，至少須要增長 XXX 臺服務器，帶寬流量消耗 XXX 萬……」。

這是一段真實的面試場景，而我就是那位被面試者。這些年 Web 前端技術在迅猛的發展，這樣的問題已經有了解決方案——WebFont，若是再回到當年面試的場景，我想我會給出更好的答案。

WebFont 技術可讓網頁使用在線字體，而無需使用圖片，從而有機會解決開頭設計師提到的問題。它經過 CSS 的 @font-face 語句引入在線字體，使用 CSS 選擇器指定運用字體的文本，與此同時專用於 Web 展現的 woff 格式字體也獲得各大瀏覽器廠商支持，進一步減小了字體的體積。在國外，WebFont 已經很是流行了，大量的網站使用了 WebFont 技術，而業界大佬 Google 也順勢推出的免費 WebFont 雲託管服務，這一切均帶動了國外字體制做行業的高速發展。

WebFont 的優點

相對圖片，WebFont 有以下優點：

1. 支持選中、複製
2. 支持 Ctrl+F 查找
3. 對搜索引擎友好
4. 支持工具翻譯
5. 支持無障礙訪問，支持朗讀
6. 字體是矢量圖形，支持矢量縮放，自動適配高清屏
7. 文本修改方便
8. 字形能夠重複利用，節省網絡資源

中文 WebFont 的困境

既然 WebFont 有如此多優點，爲什麼中文站點依然不多采用？這裏主要是三個「中國特點」形成的：

中文字體體積

英文只有 26 個字母，一套字體不過幾十 KB；而漢字卻有數萬個，致使字體文件一般有好幾 MB 大小，文件體積比英文字體大數百倍，按照中國網絡環境的現狀，用於實際項目中顯然不現實。

瀏覽器類型

國內瀏覽器市場異常繁榮，從 IE6 到各類殼的瀏覽器，他們對字體格式的支持也不同，字體格式轉換至關繁瑣。

操做系統

至關長的時期內，Windows XP 操做系統是國內的主流，而 XP 系統對字體渲染表現差勁，設計師難以接受 WebFont 的表現，而寧願使用圖片。不過隨着 XP 系統市場份額急劇降低以及移動設備的崛起，這個問題已經變得再也不那麼重要了。

總結一下，中文 WebFont 首要解決的問題即是：壓縮與轉碼。

現有的中文 WebFont 解決方案

本地製做

經過字體制做工具來刪除沒有使用的字符，即製做精簡版字體，這也是我以前實踐過的方案。

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

字體雲服務

國內目前有兩家公司提供中文 WebFont 雲託管服務，他們可以壓縮與轉碼字體：

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

現有方案的問題

在實踐中，經過工具製做精簡版字體異常繁瑣，它須要仔細覈對字符，修改很是麻煩，效率低下且容易遺漏字符而致使出錯

第三方雲服務最大的問題是沒法保證穩定性，可否支撐海量用戶訪問仍是個問號，至少目前這兩家中文 WebFont 平臺中尚未大型商業站點的案例，大多都是一些小型我的或企業網站在使用

本地自動化 WebFont 壓縮設想

出於性能以及可控性的考慮，咱們排除了第三方雲服務方案，嘗試設計本地自動化方案。和小夥伴討論的過程當中，咱們想到了以前有同事作過自動化切圖的工具，原理是用腳本操做 Photoshop，那麼咱們是否一樣能夠編寫腳本讓字體工具自動化的操做呢？理論上 OK，值得咱們去嘗試。

字體壓縮關鍵在於刪除沒必要要的字符，咱們能夠指定一個配置文件來指定字體以及其所使用的字符，而後操做字體工具精簡字體便可。

前面提到，若是手工配置字體所使用的字符可能會有遺漏的風險，而且每次頁面修改都須要同步修改配置文件，這裏可否實現自動化配置？

靈感老是在不經意間出現，咱們將目光又朝向了 CSS，由於 CSS 自己就一個完整的配置文件：它的 @font-face 語句記錄着字體名稱與文件路徑，選擇器記錄着字體使用範圍，而 CSS 選擇器又與 HTML 文檔相對應，HTML 文檔又可使用選擇器來查找節點與文本。

字蛛（Font-Spider）誕生

爲了實現上述設想，咱們須要擁有這三個小夥伴：

1. 分析模塊：負責收集字體與字體使用的字符
2. 壓縮模塊：負責刪除字體中沒有使用的字符實現壓縮
3. 轉碼模塊：負責將字體轉換成跨瀏覽器使用的格式

藉助開源的力量，工具被迅速的實現出來，很是感謝如下開源項目的幫助：

• css.js：它能將 CSS 解析成語法樹，而且可以較好的容錯適應各類 hack 語法
• jsdom：它可以在 NodeJS 中實現 W3C DOM API，使得我可使用 document.querySelectorAll() 方法輸入 CSS 選擇器來查找 HTML 節點上的文本
• font-optimizer：這是一個使用 Perl 編寫的字體優化工具
• ttf2eot、ttf2woff、ttf2svg：是它們完成了跨瀏覽器字體格式轉碼的工做

成果

指定 HTML 文件路徑就能夠自動化的壓縮與轉碼字體，過程當中徹底無需人工干預，能夠方便的集成在前端發佈系統中。

開源

不斷的完善後，咱們將工具命名爲——字蛛（Font-Spider），並回饋給開源社區，但願它可以爲中文 WebFont 的發展出一份力，讓更多的中文站點可使用精美的字體。套用一句話結束本文：技術會遲到，但從不會缺席。

• 字蛛官網：http://font-spider.org
• 項目貢獻者：@糖餅 @fufu @kdd

文章出處 遲到的中文 WebFont