WebFont字體文件壓縮

@font-face 對CSS3來說，現(xiàn)在已經(jīng)不是很陌生了，頁面上的很多圖標都是通過字體展示出來的。但是呀，很多設計師為了頁面整體好看，就喜歡用一些特殊字體，英文字體也就算了，也就26個字符加標點符號就是了，一個字體文件也不大。中華文化博大精深，豈是26個漢字能搞定的？所以中文字體庫一般都是十幾兆，如果將整個字體庫引入到頁面中，頁面加載速度很受影響。為了按需加載，將頁面上用的漢字提取出來，重現(xiàn)生成一個只有需要用的字符的字體庫，這樣文件會小很多。在很久之前，我們通過手動的方式來制作字體庫的，具體可以查看網(wǎng)絡字體@font-face，如何處理網(wǎng)頁中的特殊字體？。這樣的手工作業(yè)方式很麻煩，于是大神們出現(xiàn)了很多工具。

需求

最近有一個業(yè)務功能，要求客戶端傳來要用到的文字和字體，返回一個整理后的字體文件。

通過搜索呢，發(fā)現(xiàn)有sfnttool.jar (Java)，Fontforge (Python)，Font Optimizer (Perl)，但是老子不會這些語言，繼續(xù)搜索，發(fā)現(xiàn)了font-spider —— 一款NodeJS編寫的工具，這個俺會。

font-spider

github

font-spider是通過讀取HTML文件，自動檢測網(wǎng)頁中引用的字體和文字，來生成字體文件。具體的使用基礎(chǔ)教程可查看font-spider 前端開發(fā)字體的好工具。

如果寫一個后端接口，總不能先生成一個html文件，再運行命令吧，這樣不是很合理。那就看看它的package.json，看看他的依賴包是不是有核心功能的工具。

font-spider package.json

gulp、css、browser-x等不相關(guān)的排除掉，只剩下fontmin了。

搜索一下，發(fā)現(xiàn)fontmin(官網(wǎng))正是我所需要的。

fontmin

github

fontmin提供了客戶端、提供了命令行、也提供了NodeJS調(diào)用的方式。通過github中的package.json可以知道，核心的功能是通過fonteditor-core模塊實現(xiàn)的。

fontmin客戶端的使用基礎(chǔ)教程——特殊字體神器-fontmin，秒殺一切工具。

Node的使用基礎(chǔ)方式：

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/Microsoft Yahei.ttf') // 設置服務端源字體文件
    .dest('build/fonts') // 設置生成字體的目錄
    .use(Fontmin.glyph({ 
        text: '尹小芃槑', // 設置需要的自己
    }));

fontmin.run(function (err, files) { // 生成字體
    if (err) {
        throw err;
    }
    console.log(files[0]); // 返回生成字體結(jié)果的Buffer文件
});