子集字體很棒以提高性能

Font Awesome 是一款廣受歡迎的圖標庫，但其使用方式很容易導致性能不佳。通過子集選擇Font Awesome，我們可以移除字體文件中任何未使用的字形。這將減少網絡傳輸的字節數，從而提高性能。

讓我們一起在一個Font Awesome 項目中進行字體子集選擇，看看它能帶來什麼改變。在接下來的過程中，我假設您正在導入Font Awesome 提供的CSS 文件，並使用其網絡字體來顯示圖標。

項目設置

為了演示，我只有一個HTML 文件，它導入Font Awesome 的基本CSS 文件。為了獲得合理的圖標樣本，我已經列出了我在一個副項目中使用的每個圖標。

以下是子集選擇字體之前，我們的HTML 文件在瀏覽器中的樣子：

以下是DevTool 的網絡選項卡，顯示加載的內容。

現在讓我們看看我們的字體文件渲染所有這些內容需要多少字節。

基準測試

我們想看看Font Awesome 最直接、性能最差的使用方式是什麼樣的。換句話說，我們想要實現速度最慢、沒有任何優化的方案。我正在導入Font Awesome 提供的all.min.css 文件。

如上所示，壓縮後的文件大小為33.4KB，這還不錯。不幸的是，當我們查看DevTool 的字體選項卡時，情況變得更糟了。

雖然字體文件對於瀏覽器來說，不像JavaScript 那樣是昂貴的資源，但它們仍然是瀏覽器需要下載的字節，僅僅是為了幾個小圖標。考慮到您的一些用戶可能在移動設備上瀏覽您的網站，遠離強大的或快速的互聯網連接。

使用PurifyCSS 的第一次嘗試

Font Awesome 的主樣式表包含數千個圖標的定義。但如果我們只需要幾十個圖標呢？我們肯定可以去除不需要的東西？

有很多工具可以分析您的代碼，並從樣式表中刪除未使用的樣式。我碰巧正在使用PurifyCSS。雖然這個庫不再積極維護，但其理念相同，最終，這不是我們正在尋找的解決方案。但讓我們看看當我們將CSS 修剪到僅包含所需內容時會發生什麼，我們可以使用以下腳本實現：

 <code>const purify = require("purify-css"); const content = ["./dist/**/*.js"]; // Vite 构建的内容purify(content, ["./css/fontawesome/css/all.css"], { minify: true, output: "./css/fontawesome/css/font-awesome-minimal-build.css" });</code>

當我們加載新構建的CSS 文件時，我們通過網絡傳輸的CSS 字節數量大幅下降，從33KB 降至7.1KB！

但不幸的是，我們的其他Font Awesome 字體文件沒有改變。

發生了什麼？ PurifyCSS 完成了它的工作。它確實刪除了所有未使用的圖標的CSS 規則。不幸的是，它無法進入實際的字體文件來修剪字形，以及CSS 規則。

如果有一個像PurifyCSS 這樣的工具可以處理字體文件就好了……

子集選擇工具來救援！

當然，有一些工具能夠從字體文件中刪除未使用的內容，它們被稱為子集選擇工具。子集選擇工具分析您的網頁，查看您的字體文件，並修剪未使用的字符。有很多子集選擇字體的工具，例如Zach Leatherman 的Glyphhanger。事實證明，子集選擇Font Awesome 非常簡單，因為它自帶內置的子集選擇工具。讓我們來看看。

自動子集選擇字體

我即將展示的自動子集選擇和手動子集選擇工具需要付費的Font Awesome Pro 訂閱。

Font Awesome 允許您設置所謂的工具包，在Font Awesome 文檔中將其描述為“一個背包，可以輕鬆地將您需要的所有圖標和精彩內容放在一個簡潔輕便的小包中，方便您輕鬆地將其添加到項目中”。因此，與其導入任何和所有CSS 文件，工具包為您提供一個可以添加到HTML 文件的

的單個腳本標籤，從那裡，工具包只從字體文件中發送您實際需要的字體字形。創建工具包大約需要一分鐘。您將獲得一個類似於這樣的腳本標籤：

<code></code>

當腳本加載時，我們現在根本沒有CSS 文件，而JavaScript 文件只有4KB。讓我們再次查看DevTools 字體選項卡，看看在我們進行了一些子集選擇之後加載了哪些字體文件。

我們已經從757KB 降到了331KB。減少了50% 以上。但我們仍然可以做得更好，特別是如果我們只渲染54 個圖標的話。這就是Font Awesome 的手動字體子集選擇工具發揮作用的地方。

手動子集選擇字體

如果Font Awesome 為我們提供了一個工具，讓我們可以選擇我們想要的精確圖標，然後為它提供自定義構建，那不是很棒嗎？是的，他們做到了。由於某種原因，他們沒有大肆宣傳這一點，但他們實際上確實有一個專門用於手動子集選擇字體的桌面應用程序。該應用程序可以從他們的網站下載——但是，與自動子集選擇工具一樣，此應用程序需要付費的Font Awesome 訂閱才能實際使用。

搜索圖標，選擇系列，添加您想要的內容，然後單擊大的藍色構建按鈕。這實際上是生成Font Awesome 圖標的自定義子集所需做的全部工作。

單擊按鈕後，Font Awesome 將詢問它應該將自定義構建保存到哪裡，然後它會轉儲一個包含您需要的所有內容的ZIP 文件。事實上，您將獲得的結構與普通的Font Awesome 下載完全相同，這使得事情特別簡單。當然，它允許您將自定義構建保存為項目文件，以便您可以稍後重新打開它以根據需要添加或刪除圖標。

我們將打開DevTools 查看我們正在加載的圖標的最終大小，但首先，讓我們看看實際的字體文件本身。自定義構建會創建許多不同類型，具體取決於您的瀏覽器使用什麼。讓我們關注.woff2 文件，這是Chrome 加載的文件。之前存在的相同light、regular、duotone、solid 和brand 文件仍然存在，只是這次沒有一個文件大於5KB……而且這是在它們被gzip 壓縮之前！

CSS 文件怎麼樣？它縮小到只有8KB。使用gzip 壓縮後，它只有2KB！

以下是DevTools 中的最終統計數據：

在我們離開之前，如果您想知道該桌面字體子集GUI 工具是否有一個可以與CI/CD 集成以在構建時生成這些文件的CLI，答案是……還沒有。我給Font Awesome 的工作人員發了電子郵件，他們說正在計劃中。如果它發布，這將允許用戶簡化他們的構建過程。

如您所見，使用Font Awesome 等工具來顯示圖標非常酷。但是默認的使用方式並不總是對您的項目來說是最佳方法。為了獲得盡可能小的文件大小，子集選擇字體是我們能夠做的事情，以修剪我們不需要的內容，並且只提供我們所需的內容。這就是我們想要的性能，尤其是在加載字體方面，傳統上很難處理。

以上是子集字體很棒以提高性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！