背景

一個(gè)小的 H5 項(xiàng)目，客戶要求使用指定的字體，一般來(lái)講如果有特殊字體，前端這邊都按照切圖來(lái)處理了。

但是這個(gè)項(xiàng)目中的特殊字體的字符內(nèi)容是變化的，也就沒(méi)辦法提前切圖。

所以只能在網(wǎng)頁(yè)中使用字體文件，又因?yàn)槲募容^大，影響頁(yè)面加載速度，一方面考慮使用 CDN 來(lái)保存字體文件，另一方面也考慮把文件壓縮一下。

解決思路

明確了問(wèn)題，下面就是怎么解決問(wèn)題了。

解決這個(gè)問(wèn)題有兩個(gè)思路：

一種是使用一些前端工具，比如 font-spider、font-spider-plus 等，根據(jù)網(wǎng)站內(nèi)容壓縮字體。

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

因?yàn)槲覀兊奈谋緝?nèi)容是動(dòng)態(tài)生成的，不確定性很強(qiáng)，所以這里采用第二種方式。

另外，關(guān)于網(wǎng)頁(yè)字體優(yōu)化的更詳細(xì)的建議和方法，可以參考這篇文章。

解決步驟

廢話不多說(shuō)，開(kāi)搞

1、使用 fonttools 壓縮字體文件

需要 Python 環(huán)境，并已安裝好 pip。

我使用的是 Python 3.7.4，pip 19.1.1

使用 pip 來(lái)安裝 fonttools

pip install fonttools

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

執(zhí)行以下命令開(kāi)始?jí)嚎s文件：

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

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

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

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

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

還沒(méi)完，還能繼續(xù)壓縮。

編譯安裝 Google woff2（我的環(huán)境是 OSX，其他環(huán)境大家可以自測(cè)一下）：

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

安裝完成之后，咱們把前面已經(jīng)壓縮過(guò)一次的字體文件拷貝到 woff2 根目錄，開(kāi)始執(zhí)行壓縮：

./woff2_compress NotoSansHans-Bold.subset.otf

運(yùn)行得到如下結(jié)果：

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

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

總結(jié)

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

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

好了，打完收工。

祝大家變的更強(qiáng)。

其他資料

• 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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。