當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端网页字体优化指南

發布時間：2023/12/9 HTML 52 豆豆

生活随笔收集整理的這篇文章主要介紹了前端网页字体优化指南小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

轉換字體格式

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

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

TTF 字體轉 WOFF2

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

ttf-to-woff2
webfont-generator

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

cat font.ttf | ttf2woff2 > font.woff2

因為使用了 cat 命令來提取 ttf 的內容，如果你使用的是 windows ，需要使用 git bash 或 wsl 來運行。

OTF 轉 WOFF2

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

經過一番折騰后，找到了一個不錯的 python 庫 otf2ttf，能夠穩定的將 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 左右。有時候，我們只有少數的文字需要用到特殊字體，比如說只有 0-9 這 10 個數字用到某種特殊字體，如果把整個字體文件引入就沒有必要了，比切10個圖片還要大。好在有一些技術能夠將 0-9 這10個數字對應的字體子集提取出來。我平時會使用 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 文件所在的目錄執行以下命令：

font-spider index.html 復制代碼

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

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

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

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

統一渲染時機

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

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

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

假如這個 myfont.woff2 文件大小為 4M，而網絡下載速度只有 1M/s ，則加載這個字體需要 4 秒鐘。這4秒期間由于還沒有加載完成遠程字體，瀏覽器會使用什么字體渲染呢？事實上，不同的瀏覽器表現會不一樣的，以下是一些常見的桌面瀏覽器的表現：

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

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

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

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

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

然后引入 webfontloader (也可以通過 npm 安裝)，將你在 css 中定義的字體名稱添加到 custom.families 列表中，并在 active 回調中將該字體添加到對應的元素上，代碼如下：

這樣瀏覽器一開始就會使用默認字體渲染內容，等字體加載完成后再使用特殊字體重新渲染。

總結

以上是生活随笔為你收集整理的前端网页字体优化指南的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： MSP430F5529 DriverLi
下一篇：调试利器：浏览器 Logger