如何让网页字体文件大瘦身？前端字体优化知多D
日常開發(fā)網(wǎng)頁經(jīng)常會使用一些特殊字體，比如思源黑體、蘋方字體等，因?yàn)檫@些字體在一般的宿主環(huán)境中是不存在的，需要通過 css 的 @font-face 定義，并從服務(wù)器中加載對應(yīng)的字體文件，而字體文件一般都是比較大的，甚至有時(shí)候一個字體比其他所有的資源（js、css、圖片）加起來還要大，對網(wǎng)頁的加載性能起到非常關(guān)鍵的影響，因此有必要對字體進(jìn)行一些優(yōu)化。本文主要從字體格式、按需提取、統(tǒng)一渲染三個方面來談?wù)剝?yōu)化字體的常用技巧。
轉(zhuǎn)換字體格式
現(xiàn)在是 1202 年了，各主流設(shè)備基本都支持 woff2 字體格式，因此網(wǎng)站中沒有必要再引入多種不同格式的字體了。一般地，建議只引入 woff2 就好了，既可以保持代碼的簡潔性，又可以減少上傳到你服務(wù)器的文件，何樂而不為？
可是很多時(shí)候美術(shù)同學(xué)只提供其他格式的字體文件給我們，比如 TTF 或 OTF，那如何將其轉(zhuǎn)換成 woff2 呢？
TTF 字體轉(zhuǎn) WOFF2
TTF 字體，是蘋果和 windows 都支持的一種字體，因此是美術(shù)同學(xué)最喜歡用的。TTF 轉(zhuǎn)換 WOFF2 是比較簡單的，可以選擇線上轉(zhuǎn)換，推薦的網(wǎng)站有以下兩個
ttf-to-woff2[1]
webfont-generator[2]
但是個人覺得線上轉(zhuǎn)換等待上傳的時(shí)間比較久，而且有時(shí)候生成的文件是空白的，因此更加傾向于使用 node 庫 ttf2woff2[3] 轉(zhuǎn)換。該庫的周下載量達(dá)到 10w+ 的，可見好多人都會有將 tff 轉(zhuǎn)換成 woff2 的需求。使用方法也很簡單：
cat?font.ttf?|?ttf2woff2?>?font.woff2 復(fù)制代碼因?yàn)槭褂?了 cat 命令來提取 ttf 的內(nèi)容，如果你使用的是 windows ，需要使用 git bash 或 wsl 來運(yùn)行。
OTF 轉(zhuǎn) WOFF2
除了 TTF ，美術(shù)同學(xué)還經(jīng)常提供 OTF 給我們，這是微軟和 Adobe 共同研發(fā)的字體，因此在 windows 平臺還是比較流行的。那如何將其轉(zhuǎn)換成 WOFF2 呢？目前我還沒有發(fā)現(xiàn)哪個線上網(wǎng)站或 node 庫能一步到位轉(zhuǎn)換的，在 google 上搜索好幾個線上轉(zhuǎn)換的網(wǎng)站，要么轉(zhuǎn)換完成后無法下載 ，要么轉(zhuǎn)換下載后是個空文件，反正就是不靠譜的東西。
經(jīng)過一番折騰后，找到了一個不錯的 python 庫 otf2ttf[4]，能夠穩(wěn)定的將 otf 轉(zhuǎn) ttf。使用方法也比較簡單，首先安裝 python，然后通過 pip 安裝 otf2ttf 就可以使用了（pip 類似于 npm，是 python 的包管理器），不過官方的文檔中示例代碼應(yīng)該是有一點(diǎn)小筆誤：
otf2ttf?MyFont.ttf 復(fù)制代碼里面的 MyFont.ttf 應(yīng)該是 MyFont.otf 才對，因?yàn)檫@個 input 應(yīng)該是 OTF 類型而不是 TTF 。
使用 python otf2ttf 生成 ttf 文件 后，就可以使用上面提到的將 ttf 轉(zhuǎn)換成 woff2 的方法獲取到 woff2 了。
關(guān)于字體轉(zhuǎn)換的這里再啰嗦一下：有時(shí)候美術(shù)同學(xué)還會提供 ttc 文件給我們，這不是單個字體，而是將多種字體打包在一起了，需要從中提取出 ttf 后才能使用，可以嘗試使用 TTC2TTF[5]。
按需壓縮字體
一般的，盡管將字體轉(zhuǎn)換成 woff2 格式，最小依然也有好幾百 K ，而更多情況下會有 1-4M 左右。有時(shí)候，我們只有少數(shù)的文字需要用到特殊字體，比如說只有 0-9 這 10 個數(shù)字用到某種特殊字體，如果把整個字體文件引入就沒有必要了，比切10個圖片還要大。好在有一些技術(shù)能夠?qū)?0-9 這10個數(shù)字對應(yīng)的字體子集提取出來。我平時(shí)會使用 font-spider 字蜘[6] 來提取。
首先，全局安裝 font-spider:
npm?install?font-spider?-g 復(fù)制代碼然后，新建一個 html 文件，比如文件名為 index.html ，里面用一個元素包含所有的你想要提取的文字，比如 0-9，并為這個元素定義上你想要的特殊字體：
?<h1>0123456789</h1><style>?@font-face?{font-family:?'sourceHan';src:?url('./SourceHanSansCN-Regular.ttf');font-weight:?normal;font-style:?normal; }h1?{font-family:?'sourceHan'; }?</style> 復(fù)制代碼最后，在這個 html 文件所在的目錄執(zhí)行以下命令：
font-spider?index.html 復(fù)制代碼這時(shí)候，原來的 SourceHanSansCN-Regular.ttf 就會被移動到 .font-spider/ 目錄下，而原來位置的字體會被替換成只提取了 0-9 的字體文件。這個體積相差了好幾個數(shù)量級的：
完整的字體文件大小是 10M ：
image.png只提取 0-9 10 個數(shù)字的字體文件只有 7K：
image.png所以，如果你的網(wǎng)站內(nèi)容是靜態(tài)不變的，則建議使用 font-spider 將你所要用到的文字提取出來，這將會大大的減少字體文件的體積。
統(tǒng)一渲染時(shí)機(jī)
將字體轉(zhuǎn)換成 WOFF2 及靜態(tài)內(nèi)容網(wǎng)站使用 font-spider 進(jìn)行按需壓縮，可以很好的控制字體的大小。（PS：WOFF2 字體沒有必要再開啟 GZIP，因?yàn)檫@個字體文本本身就是壓縮過的）。
最后，我們再來看看網(wǎng)絡(luò)速度對字體內(nèi)容的影響，假如你的網(wǎng)頁全部內(nèi)容都使用某種字體，CSS 定義如下：
@font-face?{font-family:?myfont;src:?url('./myfont.woff2')?format('woff2'); }body?{font-family:?myfont; } 復(fù)制代碼假如這個 myfont.woff2 文件大小為 4M，而網(wǎng)絡(luò)下載速度只有 1M/s ，則加載這個字體需要 4 秒鐘。這4秒期間由于還沒有加載完成遠(yuǎn)程字體，瀏覽器會使用什么字體渲染呢？事實(shí)上，不同的瀏覽器表現(xiàn)會不一樣的，以下是一些常見的桌面瀏覽器的表現(xiàn)：
IE：它會直接使用備用字體渲染，最后等webfont字體加載完畢后重新渲染。
Safari：它會一直等待webfont字體加載完畢，并且期間不會渲染字體。
Chrome / Firefox：它們會等待webfont字體加載，如果在3秒之內(nèi)沒有加載完畢，則使用備用字體渲染。最后webfont加載完畢，使用并重新渲染。
我們需要想辦法統(tǒng)一這些行為，比較理想的行為是：先使用系統(tǒng)默認(rèn)字體，等到遠(yuǎn)程字體加載完成了再替換成特殊字體。借助于 WebFontLoader[7] 可以很容易的實(shí)現(xiàn)這一效果。下面來看一下如何使用:
在 css 中通過 @font-face 定義一個字體：
注意，CSS 中只需要定義字體就行，而不要使用使用這個字休。
然后 引入 webfontloader (也可以通過 npm 安裝)，將你在 css 中定義的字體名稱添加到 custom.families 列表中，并在 active 回調(diào)中將該字體添加到對應(yīng)的元素上，代碼如下：
這樣瀏覽器一開始就會使用默認(rèn)字體渲染內(nèi)容，等字體加載完成后再使用特殊字體重新渲染。
小結(jié)
關(guān)于字體優(yōu)化技巧就先寫到這里啦，有問題的歡迎留言交流哈。
參考資料
[1]
https://everythingfonts.com/ttf-to-woff2: https://link.juejin.cn/?target=https%3A%2F%2Feverythingfonts.com%2Fttf-to-woff2
[2]https://www.fontsquirrel.com/tools/webfont-generator: https://link.juejin.cn/?target=https%3A%2F%2Fwww.fontsquirrel.com%2Ftools%2Fwebfont-generator
[3]https://www.npmjs.com/package/ttf2woff2: https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fttf2woff2
[4]https://github.com/awesometoolbox/otf2ttf: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fawesometoolbox%2Fotf2ttf
[5]https://www.npmjs.com/package/ttc2ttf: https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fttc2ttf
[6]https://github.com/aui/font-spider: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Faui%2Ffont-spider
[7]https://github.com/typekit/webfontloader: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Ftypekit%2Fwebfontloader
最后
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：
點(diǎn)個「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
歡迎加我微信「huab119」拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
關(guān)注公眾號「前端勸退師」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。
點(diǎn)個在看支持我吧，轉(zhuǎn)發(fā)就更好了
總結(jié)
以上是生活随笔為你收集整理的如何让网页字体文件大瘦身？前端字体优化知多D的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Exynos4412 中断驱动开发相关问
- 下一篇： web前端三大主流框架分析对比