如何在Linux上將OTF或是TTF字型檔案轉成WOFF或是WOFF2網頁字型檔案?


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

OpenTypeTrueTypeOTFTTF

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

以下例子均以17.8MB的「SourceHanSansTC-Regular.otf」來做轉檔例子。

OTF或是TTF檔案轉成WOFF

sfnt2woff

Linux上要將字型轉換成WOFF,可以直接使用「woff-tools」內的「sfnt2woff」指令來完成。如果是使用Ubuntu或是其他基於UbuntuLinux發行版,可以直接使用以下指令來安裝「woff-tools」:

sudo apt-get install woff-tools

linux-woff

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

sfnt2woff {來源字型檔案路徑}

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

sfnt2woff SourceHanSansTC-Regular.otf

linux-woff

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

「sfnt2woff」指令會使用zLib壓縮字型,「SourceHanSansTC-Regular.woff」的檔案大小為13.6MB,比起原先的17.8MB,還小了約23.6%。若是使用Zopfli壓縮字型,可以獲得更好的壓縮結果。

sfnt2woff-zopfli

至於要如何製作Zopfli壓縮WOFF字型檔案,就要使用別的工具才行了。「sfnt2woff-zopfli」是個不錯的開源工具,可以將OTF或是TTF檔案使用Zopfli壓縮來轉成WOFF字型檔案。可以使用以下連結來取得「sfnt2woff-zopfli」的原始碼:

https://github.com/bramstein/sfnt2woff-zopfli

編譯方式很簡單,只要輸入以下指令即可:

make

linux-woff

如果出現未定義參考到「log」的錯誤,需要修改Makefile,在「cc」指令上加上「-lm」參數,讓它來連結「libm」函式庫即可。

linux-woff

linux-woff

編譯完成後,可以在工作目錄下找到「sfnt2woff-zopfli」和「woff2sfnt-zopfli」這兩個執行檔案。我們要使用的是「sfnt2woff-zopfli」,來將OTF或是TTF檔案轉成WOFF檔案。

linux-woff

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

sfnt2woff-zopfli {來源字型檔案路徑}

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

OTF或是TTF檔案轉成WOFF2

woff2_compress

使用以下連結來取得「woff2」的原始碼:

https://github.com/google/woff2

編譯方式很簡單,只要輸入以下指令即可:

make clean all

linux-woff

編譯完成後,可以在工作目錄下找到「woff2_compress」和「woff2_decompress」這兩個執行檔案。我們要使用的是「woff2_compress」,來將OTF或是TTF檔案轉成WOFF2檔案。

linux-woff

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

woff2_compress {來源字型檔案路徑}

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

如果使用一般壓縮軟體來壓縮字型的話,比如使用rar並加上「-ma5 -m5」參數,來達成將字型壓縮成最小的「SourceHanSansTC-Regular.rar」,得到的檔案大小為11.6MB,還比能直接進行字型套用的WOFF2字型格式檔案還要大!目前各大瀏覽器都在逐漸添加對WOFF2字型的支援,因此在設計網頁的時候,如果有用到網頁字型的話,強烈建議加上WOFF2字型格式來優化網頁

關於作者

Magic Len

各位好,我是Magic Len,是這網站的管理員。我是台灣台中大肚山上人,畢業於台中高工資訊科和台灣科技大學資訊工程系,曾在桃機航警局服役。我熱愛自然也熱愛科學,喜歡和別人分享自己的知識與經驗。如果你有興趣認識我,可以加我的Facebook,並且請註明是從MagicLen來的。

相關文章