中文WebFont解決方案Font-Spider(字蛛)

咱們在平常需求中，常常會碰到視覺設計師對某個中文字體效果很是堅持的狀況，由於頁面是否高大上，字體選擇是很重要的一個因素，選擇合適的字體可讓頁面更優雅。面對這種問題，咱們一般如下方式來進行設計還原：

使用圖片背景還原設計，即便用 photoshop 將文本圖層單獨導出成網頁背景圖片。

產生的問題

1.    製做與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合併雪碧圖更繁瑣，後期修改更加繁瑣。

2.    用戶體驗差。致使網頁不支持選中、複製、搜索、翻譯、矢量縮放，也會影響視障用戶使用讀屏器操做網頁。

3.    帶來更多帶寬消耗。導出的圖片體積隨着文本面積增長，且字形沒法重複利用，這消耗着大量的服務器資源

WebFont技術提供了在網頁使用特殊字體的可能，從而避免用圖片的方法。它的實現方法是經過CSS的@font-face引入字體。不少互聯網公司已經率先採用了這種方法，好比Apple官網就是採用了本身的字體。Google也推出了免費的WebFont雲託管服務，在國外網站自定義字體獲得很好的應用。

在中文方面自定義字體卻遲遲沒有普遍應用，這是有什麼緣由呢？

中文WebFont的困境：

1. 中文字體體積大

英文字體文字部分由26個字母組成，因此字體文件一般不會太大；而中文漢字數量總共約有九萬左右， 國標(GB)字庫 有6763字,  而根據《現代漢語經常使用字表》統計數據，經常使用漢字也要有3500個左右。 中文字體文件一般都會幾M的大小，參照如今中國的網絡環境，顯然不適合在項目中使用。

2. 瀏覽器支持

不一樣瀏覽器對字體的支持也是不一樣的，沒有一種能夠支持全部瀏覽器的字體，這就要求咱們針對不一樣的瀏覽器製做不一樣的字體。(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 大小，解決中文字體過大的問題，並編碼成跨平臺兼容的格式。

主頁

web 中文字體演示與工具使用請前往主頁：http://font-spider.org/

項目實踐

2014年接到的最後一個項目需求——騰訊雲解決方案改版。新的騰訊雲解決方案採用了全新的排版方式，更加簡潔大氣。標題部分字體更是採用了Adobe與Google所領導開發的開源字體——思源字體。面對項目中特殊字體的需求，快速整理了實現方案。騰訊雲線上的解決方案已經採用了思源的特殊字體。

開源

咱們把Font-Spider（字蛛）不斷完善，而且回饋給開源社區，但願爲中文WebFont的發展出一份力，讓更多的中文站點可使用精美的字體。

 

感謝你的閱讀，本文由 騰訊ISUX 版權全部，轉載時請註明出處，違者必究，謝謝你的合做。
註明出處格式：騰訊ISUX (http://isux.tencent.com/zh-hans/font-spider.html)