WOFF(Web Open Font Format)是一種用於網頁裡的字型格式,支援OpenType和TrueType,可以使用zlib或是Zopfli來壓縮字型,大大地減少伺服器傳遞字型時損耗的網路流量。WOFF2(WOFF 2.0)是比較新穎的字型格式,擁有比WOFF還要更好的壓縮能力,使得字型檔案變得更小、更易於傳輸!如果想要在網頁裡,透過CSS的@font-face功能來外嵌網路字體(Web Font),十分建議使用WOFF字型格式來達成。



OpenType和TrueType、OTF和TTF

TrueType是一種要曲線來描繪字體的字型格式,標準的副檔名為TTF。OpenType是可以同時使用PostScript(為一種建立向量圖形的程式語言,有許多良好的特性非常適合用於排版輸出)或是TrueType的字型格式,標準的副檔名為OTF。

以下例子均以17.3MB的NotoSansCJKtc-Regular.otf來做轉檔例子。

將OTF或是TTF檔案轉成WOFF

sfnt2woff

在Linux上要將字型轉換成WOFF,可以使用sfnt2woff指令工具來完成。

如果是使用Ubuntu或是其他基於Ubuntu的Linux發行版,可以使用以下指令來安裝:

sudo apt install woff-tools

紅帽系的Linux發行版,可以使用以下指令來安裝:

sudo dnf install woff

安裝之後,就可以使用sfnt2woff指令來將字型檔案轉成WOFF格式,使用方式如下:

sfnt2woff 來源字型檔案路徑

舉例來說,若要將目前工作目錄中的NotoSansCJKtc-Regular.otf轉成NotoSansCJKtc-Regular.woff,指令如下:

sfnt2woff NotoSansCJKtc-Regular.otf

linux-woff

執行後要等個幾秒鐘,就會在工作目錄產生轉換好的NotoSansCJKtc-Regular.woff檔案。

sfnt2woff指令會使用zLib來壓縮字型,NotoSansCJKtc-Regular.woff的檔案大小為14.4MB,比起原先的17.3MB,還小了約16.7%。若是使用Zopfli來壓縮字型,可以獲得更好的壓縮結果。

sfnt2woff-zopfli

至於要如何製作Zopfli壓縮的WOFF字型檔案,就要使用別的工具才行了。sfnt2woff-zopfli是個不錯的指令工具,可以將OTF或是TTF檔案使用Zopfli壓縮來轉成WOFF字型檔案。

如果是使用Ubuntu或是其他基於Ubuntu的Linux發行版,可以使用以下指令來安裝:

sudo apt install sfnt2woff-zopfli

紅帽系的Linux發行版,可以使用以下指令來安裝:

sudo dnf install sfnt2woff-zopfli

sfnt2woff-zopfli指令的用法和sfnt2woff相同,如下:

sfnt2woff-zopfli 來源字型檔案路徑

linux-woff

NotoSansCJKtc-Regular.otf轉成NotoSansCJKtc-Regular.woff,可能會需要幾分鐘的時間,比sfnt2woff還緩慢許多。最後產生出來的NotoSansCJKtc-Regular.woff,檔案大小為14.3MB,比起原先的17.3MB,還小了約17.3%,效果比用zLib壓縮的sfnt2woff指令還好一點點。

將OTF或是TTF檔案轉成WOFF2

在Linux上要將字型轉換成WOFF2,可以使用woff2_compress指令工具來完成。

如果是使用Ubuntu或是其他基於Ubuntu的Linux發行版,可以使用以下指令來安裝:

sudo apt install woff2

紅帽系的Linux發行版,可以使用以下指令來安裝:

sudo dnf install woff2-tools

woff2_compress指令的用法和sfnt2woff相同,如下:

woff2_compress 來源字型檔案路徑

linux-woff

NotoSansCJKtc-Regular.otf轉成NotoSansCJKtc-Regular.woff2,可能會需要花上幾分鐘的時間,比sfnt2woff甚至是sfnt2woff-zopfli還緩慢許多。最後產生出來的NotoSansCJKtc-Regular.woff2,檔案大小為12.1MB,比起原先的17.3MB,還小了約29.8%,效果卓越。

如果使用一般壓縮軟體來壓縮字型的話,比如使用rar並加上-m5參數,來達成將字型壓縮成最小的NotoSansCJKtc-Regular.otf.rar,得到的檔案大小為12.7MB,還比能直接進行字型套用的WOFF2字型格式檔案還要大!各大瀏覽器現都支援WOFF2了,如果有用到網頁字型的話,強烈建議直接使用WOFF2。