說明：本站所有作品及素材資源僅供學習與參考，請勿用於商業用途,否則產生的一切後果將由您自己承擔！如有侵犯您的版權，請及時發郵件聯繫我們（[email protected]），我們將盡快處理。
聯繫E-mail：給我留言
編者按：WebFont 技術可以讓網頁使用在線字體，而無需使用圖片，在國外非常流行，由於中文的特殊情況，有幾個難題一直沒搞定。現在在國內幾位技術大牛的努力下，終於有了第一款神器，趕緊來收 >>>
裕波：三年前，有一個設計師面試一位 Web 前端工程師，其中有一段這樣的對話：
“如果設計師希望用圖片實現某個字體樣式，而從技術的角度來說這樣不合理，但設計師非常堅持，這時候你怎麼辦？”
“我會給設計師講解工程上面臨的問題，爭取他理解。例如：如果文本使用圖片，以騰訊站點的訪問量來說，這裏會需要消耗大量的服務器資源，至少需要增加 XXX 臺服務器，帶寬流量消耗 XXX 萬”。
這是一段真實的面試場景，而我就是那位被面試者。這些年 Web 前端技術在迅猛的發展，這樣的問題已經有了解決方案——WebFont，如果再回到當年面試的場景，我會給出更好的答案。
WebFont 技術可以讓網頁使用在線字體，而無需使用圖片，從而有機會解決開頭設計師提到的問題。它通過 CSS 的@font-face語句引入在線字體，使用 CSS 選擇器指定運用字體的文本，與此同時專用於 Web 展示的 woff 格式字體也得到各大瀏覽器廠商支持，進一步減少了字體的體積。在國外，WebFont 已經非常流行了，大量的網站使用了 WebFont 技術，而業界大佬 Google 也順勢推出的免費 WebFont 雲託管服務，這一切均帶動了國外字體制作行業的高速發展。
一、WebFont 的優勢
相對圖片，WebFont 有如下優勢：
支持選中、複製
支持 Ctrl+F 查找
對搜索引擎友好
支持工具翻譯
支持無障礙訪問，支持朗讀
字體是矢量圖形，支持矢量縮放，自動適配高清屏
文本修改方便
字形可以重複利用，節省網絡資源
二、中文 WebFont 的困境
既然 WebFont 有如此多優勢，爲何中文站點依然很少採用？這裏主要是三個“中國特色”造成的：
1、中文字體體積
英文只有 26 個字母，一套字體不過幾十 KB；而漢字卻有數萬個，導致字體文件通常有好幾 MB 大小，文件體積比英文字體大數百倍，按照中國網絡環境的現狀，用於實際項目中顯然不現實。
2、瀏覽器類型
國內瀏覽器市場異常繁榮，從 IE6 到各種殼的瀏覽器，他們對字體格式的支持也不一樣，字體格式轉換相當繁瑣。
3、操作系統
相當長的時期內，Windows XP 操作系統是國內的主流，而 XP 系統對字體渲染表現差勁，設計師難以接受 WebFont 的表現，而寧願使用圖片。不過隨着 XP 系統市場份額急劇下降以及移動設備的崛起，這個問題已經變得不再那麼重要了。
總結一下，中文 WebFont 首要解決的問題便是：壓縮與轉碼。
三、現有的中文 WebFont 解決方案
1. 本地製作
通過字體制作工具來刪除沒有使用的字符，即製作精簡版字體，這也是我之前實踐過的方案。
2. 字體雲服務
國內目前有兩家公司提供中文 WebFont 雲託管服務，他們能夠壓縮與轉碼字體：
http://www.youziku.com （有字庫）
http://cn.justfont.com （就是字）
三、現有方案的問題
在實踐中，通過工具製作精簡版字體異常繁瑣，它需要仔細覈對字符，修改非常麻煩，效率低下且容易遺漏字符而導致出錯。
第三方雲服務最大的問題是無法保證穩定性，能否支撐海量用戶訪問還是個問號，至少目前這兩家中文 WebFont 平臺中還沒有大型商業站點的案例，大多都是一些小型個人或企業網站在使用。
四、本地自動化 WebFont 壓縮設想
出於性能以及可控性的考慮，我們排除了第三方雲服務方案，嘗試設計本地自動化方案。和小夥伴討論的過程中，我們想到了之前有同事做過自動化切圖的工具，原理是用腳本操作 Photoshop，那麼我們是否同樣可以編寫腳本讓字體工具自動化的操作呢？理論上 OK，值得我們去嘗試。
字體壓縮關鍵在於刪除不必要的字符，我們可以指定一個配置文件來指定字體以及其所使用的字符，然後操作字體工具精簡字體即可。
前面提到，如果手工配置字體所使用的字符可能會遺漏，這裏也能否實現自動化的提取？
靈感總是在不經意間出現，我們將目光又朝向了 CSS，因爲 CSS 本身就一個完整的配置文件：它的@font-face語句記錄着字體名稱與文件路徑，選擇器記錄着字體使用範圍，而 CSS 選擇器又與 HTML 文檔相對應，HTML 文檔又可以使用選擇器來查找節點與文本。
五、字蛛誕生
爲了實現上述設想，我們需要擁有這三個小夥伴：
分析模塊：負責收集字體與字體使用的字符
壓縮模塊：負責刪除字體中沒有使用的字符實現壓縮
轉碼模塊：負責將字體轉換成跨瀏覽器使用的格式
藉助開源的力量，工具的 Demo 版本被迅速的實現出來。感謝以下開源項目：
css.js：它能將 CSS 解析成語法樹，並且能夠較好的容錯適應各種 hack 語法
jsdom：它能夠在 NodeJS 中實現 W3C DOM API，使得我可以使用
document.querySelectorAll()方法輸入 CSS 選擇器來查找 HTML 節點上的文本font-optimizer：這是一個使用 Perl 編寫的字體優化工具，可以高效的刪除字體中指定的字符
成果
指定 HTML 文件路徑就可以自動化的壓縮與轉碼字體，過程中完全無需人工干預，可以方便的集成在前端發佈系統中。
開源
不斷的完善後，我們將工具命名爲——字蛛（Font-Spider），並回饋給開源社區，希望它能夠爲中文 WebFont 的發展出一份力，讓更多的中文站點可以使用精美的字體。套用一句話來結束本文：技術方案會遲到，但從不會缺席。
原文地址：w3ctech
作者：裕波