字蛛

中文字體自動化壓縮工具。

特性

1. 輕巧：數 MB 的中文字體可被壓成幾十 KB
2. 簡單：完全基于 CSS，無需 js 與服務端支持
3. 兼容：自動轉碼，支持 IE 與標準化的瀏覽器
4. 自然：文本支持選中、搜索、翻譯、朗讀、縮放

原理

字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，并生成跨瀏覽器使用的格式。

1. 構建 CSS 語法樹，分析字體與選擇器規則
2. 使用包含 WebFont 的 CSS 選擇器索引站點的文本
3. 匹配字體的字符數據，剔除無用的字符
4. 編碼成跨瀏覽器使用的字體格式

安裝

安裝好 nodejs，然后執行：

npm install font-spider -g

• windows 需要安裝 perl 環境才可以運行。
• GruntJS 用戶可使用 gruntjs 插件。

使用范例

在 CSS 中聲明字體

/*聲明 WebFont*/
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用選擇器指定字體*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}

1. @font-face中的src定義的 .ttf 文件必須存在，其余的格式將由工具自動生成
2. 開發階段請使用相對路徑的 CSS 與 WebFont
3. 不支持動態插入的 CSS 規則與字符
4. 不支持 CSS content屬性插入的字符

壓縮 WebFont

font-spider 1.html 2.html 3.html

• 支持通配符，例如：font-spider dest/*.html

字體兼容性參考

項目主頁：http://www.baiduhome.net/lib/view/home/1419402202437