我們在日常需求中，經常會碰到視覺設計師對某個中文字型效果非常堅持的情況，因為頁面是否高大上，字型選擇是很重要的一個因素，選擇合適的字型可以讓頁面更優雅。面對這種問題，我們通常以下方式來進行設計還原：
使用圖片背景還原設計，即使用 photoshop 將文字圖層單獨匯出成網頁背景圖片。
產生的問題
1. 製作與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合併雪碧圖更繁瑣，後期修改更加繁瑣。
2. 使用者體驗差。導致網頁不支援選中、複製、搜尋、翻譯、向量縮放，也會影響視障使用者使用讀屏器操作網頁。
3. 帶來更多頻寬消耗。匯出的圖片體積隨著文字面積增加，且字形無法重複利用，這消耗著大量的伺服器資源
WebFont技術提供了在網頁使用特殊字型的可能，從而避免用圖片的方法。它的實現方法是通過CSS的@font-face引入字型。很多網際網路公司已經率先採用了這種方法，比如Apple官網就是採用了自己的字型。Google也推出了免費的WebFont雲託管服務，在國外網站自定義字型得到很好的應用。
在中文方面自定義字型卻遲遲沒有廣泛應用，這是有什麼原因呢？
中文WebFont的困境：
-
中文字型體積大
英文字型文字部分由26個字母組成，所以字型檔案通常不會太大；而中文漢字數量總共約有九萬左右， 國標(GB)字型檔 有6763字, 而根據《現代漢語常用字表》統計資料，常用漢字也要有3500個左右。 中文字型檔案通常都會幾M的大小，參照現在中國的網路環境，顯然不適合在專案中使用。
-
瀏覽器支援
不同瀏覽器對字型的支援也是不同的，沒有一種可以支援所有瀏覽器的字型，這就要求我們針對不同的瀏覽器製作不同的字型。(N=Not supported, P=Partial support, Y=Supported)
針對以上的問題，我們可以得出中文WebFont要解決的問題是：壓縮和轉碼。
Font-Spider中文WebFont解決方案的誕生：
為了不讓工程與體驗制約著設計師對字型選擇以及創意的實現，我們利用業餘時間解決了中文WebFont的兩大問題即壓縮和轉碼，於是便有了 Font-Spider （字蛛）的誕生。作為業界首款中文 WebFont 本地自動化壓縮與轉碼工具，中文字型 web 化問題迎刃而解。它是一個 web 字型工具，通過自動化技術來壓縮、轉碼跨平臺的中文字型，讓網頁自由嵌入中文字型成為可能。
原理
1. 爬行本地 html 文件，分析所有 css 語句
2. 記錄@font-face語句宣告的字型，並且記錄使用該字型的 css 選擇器
3. 通過 css 選擇器的規則查詢當前 html 文件的節點，記錄節點上的文字
4. 找到字型檔案並刪除沒被使用的字元
5. 編碼成跨平臺使用的字型格式
編碼零干預
不需要改變 web 工程師現有的編碼習慣、工程師可直接通過 css @font-face與選擇器定義並應用字型。
壓縮與轉碼
剔除沒有使用的字元，通常可將數 MB 的字型壓縮成數十 KB 大小，解決中文字型過大的問題，並編碼成跨平臺相容的格式。
注意在font-family設定中，必須有一個generic的font來作為回滾： "serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"，如果你的瀏覽器不支援相應的font，則會回滾到serif/sans-serif所設定的字型
http://font-spider.org/
原文地址：http://isux.tencent.com/font-spider.html