背景

一個小的 H5 項目，客戶要求使用指定的字體，一般來講如果有特殊字體，前端這邊都按照切圖來處理了。

但是這個項目中的特殊字體的字符內容是變化的，也就沒辦法提前切圖。

所以只能在網頁中使用字體文件，又因為文件比較大，影響頁面加載速度，一方面考慮使用 CDN 來保存字體文件，另一方面也考慮把文件壓縮一下。

解決思路

明確了問題，下面就是怎么解決問題了。

解決這個問題有兩個思路：

一種是使用一些前端工具，比如 font-spider、font-spider-plus 等，根據網站內容壓縮字體。

另外一種，是單純壓縮文件本身，把一些生僻字、繁體字等排除，保留常用字符，用這種方式來最大限度壓縮字體文件的大小。

因為我們的文本內容是動態生成的，不確定性很強，所以這里采用第二種方式。

另外，關于網頁字體優化的更詳細的建議和方法，可以參考這篇文章。

解決步驟

廢話不多說，開搞

1、使用 fonttools 壓縮字體文件

需要 Python 環境，并已安裝好 pip。

我使用的是 Python 3.7.4，pip 19.1.1

使用 pip 來安裝 fonttools

pip install fonttools

從這里下載已經整理好的字體編碼列表文件 sc_unicode.txt。

執行以下命令開始壓縮文件：

pyftsubset NotoSansHans-Bold.otf --unicodes-file=sc_unicode.txt

其中 NotoSansHans-Bold.otf 是待壓縮的字體文件，sc_unicode.txt 是咱們剛剛下載的編碼文件。

執行完成之后，會生成一個 NotoSansHans-Bold.subset.otf 文件，也就是壓縮后的文件，這里比較一下兩個文件的大小：

可以看到文件大小從 8.6M 被壓縮到了 1.8M，壓縮了將近 80%，壓縮率很客觀。

2、使用 Google woff2 壓縮字體文件

還沒完，還能繼續壓縮。

編譯安裝 Google woff2（我的環境是 OSX，其他環境大家可以自測一下）：

sudo apt-get install -y git g++ make git clone --recursive https://github.com/google/woff2.git cd woff2 make clean all

安裝完成之后，咱們把前面已經壓縮過一次的字體文件拷貝到 woff2 根目錄，開始執行壓縮：

./woff2_compress NotoSansHans-Bold.subset.otf

運行得到如下結果：

Processing NotoSansHans-Bold.subset.otf => NotoSansHans-Bold.subset.woff2 Compressed 1828176 to 1409018.

可以看到，文件從 1.8M 被壓縮到了 1.4M，又壓縮了 20%。

總結

經過上面兩次壓縮，我們的字體文件大小從 8.6M 被壓縮到了 1.4M，壓縮了將近 85%，效果非常棒。

再配合上 CDN，頁面的加載速度基本可以保證了。

好了，打完收工。

祝大家變的更強。

其他資料

• font-spider：https://github.com/aui/font-spider
• font-spider-plus：https://github.com/allanguys/font-spider-plus
• Google woff2：https://github.com/google/woff2

總結

以上是生活随笔為你收集整理的【解决方法】如何压缩网页字体文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。