前端網(wǎng)頁字體優(yōu)化指南

時間：2023-05-28 16:21:02 | 來源：網(wǎng)站運營

時間：2023-05-28 16:21:02 來源：網(wǎng)站運營

前端網(wǎng)頁字體優(yōu)化指南：日常開發(fā)網(wǎng)頁經(jīng)常會使用一些特殊字體，比如思源黑體、蘋方字體等，因為這些字體在一般的宿主環(huán)境中是不存在的，需要通過 css 的 @font-face 定義，并從服務器中加載對應的字體文件，而字體文件一般都是比較大的，甚至有時候一個字體比其他所有的資源（js、css、圖片）加起來還要大，對網(wǎng)頁的加載性能起到非常關鍵的影響，因此有必要對字體進行一些優(yōu)化。 本文主要從字體格式、按需提取、統(tǒng)一渲染三個方面來談談優(yōu)化字體的常用技巧。

轉換字體格式

現(xiàn)在是 1202 年了，各主流設備基本都支持 woff2 字體格式，因此網(wǎng)站中沒有必要再引入多種不同格式的字體了。一般地，建議只引入 woff2 就好了，既可以保持代碼的簡潔性，又可以減少上傳到你服務器的文件，何樂而不為？

可是很多時候美術同學只提供其他格式的字體文件給我們，比如 TTF 或 OTF，那如何將其轉換成 woff2 呢？

• TTF 字體轉 WOFF2

TTF 字體，是蘋果和 windows 都支持的一種字體，因此是美術同學最喜歡用的。TTF 轉換 WOFF2 是比較簡單的，可以選擇線上轉換，推薦的網(wǎng)站有以下兩個

• ttf-to-woff2
• webfont-generator

但是個人覺得線上轉換等待上傳的時間比較久，而且有時候生成的文件是空白的，因此更加傾向于使用 node 庫 ttf2woff2 轉換。該庫的周下載量達到 10w+ 的，可見好多人都會有將 tff 轉換成 woff2 的需求。 使用方法也很簡單：

cat font.ttf | ttf2woff2 > font.woff2因為使用 了 cat 命令來提取 ttf 的內(nèi)容，如果你使用的是 windows ，需要使用 git bash 或 wsl 來運行。

• OTF 轉 WOFF2

除了 TTF ，美術同學還經(jīng)常提供 OTF 給我們，這是微軟和 Adobe 共同研發(fā)的字體，因此在 windows 平臺還是比較流行的。那如何將其轉換成 WOFF2 呢？目前我還沒有發(fā)現(xiàn)哪個線上網(wǎng)站或 node 庫能一步到位轉換的，在 google 上搜索好幾個線上轉換的網(wǎng)站，要么轉換完成后無法下載 ，要么轉換下載后是個空文件，反正就是不靠譜的東西。

經(jīng)過一番折騰后，找到了一個不錯的 python 庫 otf2ttf，能夠穩(wěn)定的將 otf 轉 ttf。 使用方法也比較簡單，首先安裝 python，然后通過 pip 安裝 otf2ttf 就可以使用了（pip 類似于 npm，是 python 的包管理器），不過官方的文檔中示例代碼應該是有一點小筆誤：

otf2ttf MyFont.ttf里面的 MyFont.ttf 應該是 MyFont.otf 才對，因為這個 input 應該是 OTF 類型而不是 TTF 。

使用 python otf2ttf 生成 ttf 文件 后，就可以使用上面提到的將 ttf 轉換成 woff2 的方法獲取到 woff2 了。

關于字體轉換的這里再啰嗦一下：有時候美術同學還會提供 ttc 文件給我們，這不是單個字體，而是將多種字體打包在一起了，需要從中提取出 ttf 后才能使用，可以嘗試使用 TTC2TTF。

按需壓縮字體

一般的，盡管將字體轉換成 woff2 格式，最小依然也有好幾百 K ，而更多情況下會有 1-4M 左右。有時候，我們只有少數(shù)的文字需要用到特殊字體，比如說只有 0-9 這 10 個數(shù)字用到某種特殊字體，如果把整個字體文件引入就沒有必要了，比切10個圖片還要大。好在有一些技術能夠?qū)?0-9 這10個數(shù)字對應的字體子集提取出來。我平時會使用 font-spider 字蜘 來提取。

首先，全局安裝 font-spider:

npm install font-spider -g然后，新建一個 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>最后，在這個 html 文件所在的目錄執(zhí)行以下命令：

font-spider index.html這時候，原來的 SourceHanSansCN-Regular.ttf 就會被移動到 .font-spider/ 目錄下，而原來位置的字體會被替換成只提取了 0-9 的字體文件。這個體積相差了好幾個數(shù)量級的：

完整的字體文件大小是 10M ：




只提取 0-9 10 個數(shù)字的字體文件只有 7K：




所以，如果你的網(wǎng)站內(nèi)容是靜態(tài)不變的，則建議使用 font-spider 將你所要用到的文字提取出來，這將會大大的減少字體文件的體積。

統(tǒng)一渲染時機

將字體轉換成 WOFF2 及靜態(tài)內(nèi)容網(wǎng)站使用 font-spider 進行按需壓縮，可以很好的控制字體的大小。（PS：WOFF2 字體沒有必要再開啟 GZIP，因為這個字體文本本身就是壓縮過的）。

最后，我們再來看看網(wǎng)絡速度對字體內(nèi)容的影響，假如你的網(wǎng)頁全部內(nèi)容都使用某種字體，CSS 定義如下：

@font-face { font-family: myfont; src: url('./myfont.woff2') format('woff2');}body { font-family: myfont;}假如這個 myfont.woff2 文件大小為 4M，而網(wǎng)絡下載速度只有 1M/s ，則加載這個字體需要 4 秒鐘。這4秒期間由于還沒有加載完成遠程字體，瀏覽器會使用什么字體渲染呢？事實上，不同的瀏覽器表現(xiàn)會不一樣的，以下是一些常見的桌面瀏覽器的表現(xiàn)：

• IE：它會直接使用備用字體渲染，最后等webfont字體加載完畢后重新渲染。
• Safari：它會一直等待webfont字體加載完畢，并且期間不會渲染字體。
• Chrome / Firefox：它們會等待webfont字體加載，如果在3秒之內(nèi)沒有加載完畢，則使用備用字體渲染。最后webfont加載完畢，使用并重新渲染。

我們需要想辦法統(tǒng)一這些行為，比較理想的行為是：先使用系統(tǒng)默認字體，等到遠程字體加載完成了再替換成特殊字體。借助于 WebFontLoader 可以很容易的實現(xiàn)這一效果。下面來看一下如何使用:

1. 在 css 中通過 @font-face 定義一個字體：

@font-face { font-family: 'myfont'; src: url('./myfont.woff2') format('woff2');}

注意，CSS 中只需要定義字體就行，而不要使用使用這個字休。

1. 然后 引入 webfontloader (也可以通過 npm 安裝)，將你要使用的字體添加到 custom.families 列表中，并在 active 回調(diào)中將該字體添加到對應的元素上，代碼如下：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script><script>WebFont.load({ custom: { families: ['myfont'], }, classes: false, active() { document.body.style.fontFamily = 'myfont'; },});</script>這樣瀏覽器一開始就會使用默認字體渲染內(nèi)容，等字體加載完成后再使用特殊字體重新渲染。

小結

關于字體優(yōu)化技巧就先寫到這里啦，有問題的歡迎留言交流哈。