遲到的中文 WebFont

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

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

「如果設計師希望用實現某個字型樣式，而從技術的角度來說這樣不合理，但設計師非常堅持，這時候你怎麼辦？」

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

支援選中、複製

支援 ctrl+f 查詢

對搜尋引擎友好

支援工具翻譯

支援無障礙訪問，支援朗讀

字型是向量圖形，支援向量縮放，自動適配高清屏

文字修改方便

字形可以重複利用，節省網路資源

既然 webfont 有如此多優勢，為何中文站點依然很少採用？這裡主要是三個「中國特色」造成的：

英文只有 26 個字母，一套字型不過幾十 kb；而漢字卻有數萬個，導致字型檔案通常有好幾 mb 大小，檔案體積比英文本型大數百倍，按照中國網路環境的現狀，用於實際專案中顯然不現實。

國內瀏覽器市場異常繁榮，從 ie6 到各種殼的瀏覽器，他們對字型格式的支援也不一樣，字型格式轉換相當繁瑣。

相當長的時期內，windows xp 作業系統是國內的主流，而 xp 系統對字型渲染表現差勁，設計師難以接受 webfont 的表現，而寧願使用。不過隨著 xp 系統市場份額急劇下降以及移動裝置的崛起，這個問題已經變得不再那麼重要了。

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

通過字型製作工具來刪除沒有使用的字元，即製作精簡版字型，這也是我之前實踐過的方案。

（圖：字型製作工具——fontlab）

國內目前有兩家公司提供中文 webfont 雲託管服務，他們能夠壓縮與轉碼字型：

在實踐中，通過工具製作精簡版字型異常繁瑣，它需要仔細核對字元，修改非常麻煩，效率低下且容易遺漏字元而導致出錯

第三方雲服務最大的問題是無法保證穩定性，能否支撐海量使用者訪問還是個問號，至少目前這兩家中文 webfont 平台中還沒有大型商業站點的案例，大多都是一些小型個人或企業**在使用

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

字型壓縮關鍵在於刪除不必要的字元，我們可以指定乙個配置檔案來指定字型以及其所使用的字元，然後操作字型工具精簡字型即可。

前面提到，如果手工配置字型所使用的字元可能會有遺漏的風險，並且每次頁面修改都需要同步修改配置檔案，這裡能否實現自動化配置？

靈感總是在不經意間出現，我們將目光又朝向了 css，因為 css 本身就乙個完整的配置檔案：它的@font-face語句記錄著字型名稱與檔案路徑，選擇器記錄著字型使用範圍，而 css 選擇器又與 html 文件相對應，html 文件又可以使用選擇器來查詢節點與文字。

為了實現上述設想，我們需要擁有這三個小夥伴：

分析模組：負責收集字型與字型使用的字元

壓縮模組：負責刪除字型中沒有使用的字元實現壓縮

轉碼模組：負責將字型轉換成跨瀏覽器使用的格式

借助開源的力量，工具被迅速的實現出來，非常感謝以下開源專案的幫助：

指定 html 檔案路徑就可以自動化的壓縮與轉碼字型，過程中完全無需人工干預，可以方便的整合在前端發布系統中。

不斷的完善後，我們將工具命名為——字蛛（font-spider），並回饋給開源社群，希望它能夠為中文 webfont 的發展出乙份力，讓更多的中文站點可以使用精美的字型。套用一句話結束本文：技術會遲到，但從不會缺席。

文章出處遲到的中文 webfont