字體子集化工具
在瀏覽器內提取指定字元,
大幅縮減字型檔案大小以提升網頁載入速度。
1. 載入字體檔案
工具介紹
「字體子集化工具」是一款能為開發者將 TTF、OTF 或 WOFF 字體中「只有網站實際用到的字元」抽取出來,重新打包成極輕量化字體檔案的線上工具。對於包含了成千上萬個字符的日文字體或中文字體來說,經過子集化處理後往往能縮減超過 90% 以上的檔案大小,極大幅度地提升網頁的載入速度與效能 (如 LCP)。
本工具利用強大的 "opentype.js" 技術,將繁雜的字元解析與字體重建過程,直接在您的瀏覽器內部完成。您的字體檔案不會被上傳到任何外部伺服器。因此,即使是具有嚴格保密條款的商業字體,您也可以在完全離線安全的狀態下安心使用。
使用方法
載入字體檔案
將您想要最佳化的字體檔案 (TTF/OTF) 拖放或點擊上傳至畫面上方的區域中。
選擇提取字元
在「設定目標字元」的頁籤中,直接點選常用的預設集 (如 ASCII、平假名等),或者直接在輸入框貼上您需要用到的特定文字。
產生與下載
點擊「產生子集字體」後便會開始處理。接著您可以在「字體預覽」頁籤即時查看字型效果,確認無誤後即可下載。
相關名詞解釋
- 子集化 (Subsetting)
- 從完整的字體檔案中,移除不必要的字元與形狀資料,只留下網頁或應用程式實際會用到的部分,藉此大幅縮小檔案體積,加速下載的過程。
- 字形 (Glyph)
- 一個文字在視覺上的具體形狀資料。一個字體檔案中往往包含了數千到數萬個字形,這也是為什麼 CJK (中日韓) 字體檔案通常非常龐大的原因。
- TTF (TrueType Font)
- 由 Apple 與 Microsoft 共同開發的標準外框字型格式。幾乎所有的作業系統與網頁瀏覽器都能完美支援,是最泛用的一種字體格式。
- OTF (OpenType Font)
- 由 Adobe 與 Microsoft 合作開發,是 TTF 的進階版本。支援更複雜的排版功能,如連字、替代字元等,在專業的設計與排版領域非常受歡迎。
- WOFF / WOFF2
- Web Open Font Format 的縮寫,是專為網頁字體所設計 (壓縮過) 的格式。WOFF2 擁有極佳的壓縮率,是現代網頁最推薦使用的字體格式。
常見問題 (FAQ)
- Q.檔案大小能縮小多少?
- 這取決於您保留的字元數量,但是將幾 MB 大小的中日文 CJK 字體,因為只擷取了幾百個字元而縮小到幾百 KB (體積減少 90% 以上) 是很常見的。
- Q.上傳的字體會被儲存在伺服器上嗎?
- 不會。所有的處理都是使用瀏覽器的 JavaScript (opentype.js) 在您的電腦上完成的。因此,即使是高度機密的商業授權字體也能安全使用。
- Q.我可以將產生的子集字體用於商業用途嗎?
- 本工具只負責字體子集化的處理。產出的字體能否用於商業用途,取決於原字體的授權條款,請務必先確認原始字體的使用規範。
- Q.支援輸出 WOFF2 格式嗎?
- 本工具目前會輸出 TTF 格式。若需轉換為 WOFF2,請利用其他專門的轉檔工具進行後續處理。
- Q.如何避免出現缺字現象?
- 如果您需要使用特殊字元、Emoji 表情符號或是 Surrogate Pairs (代理對),請務必將這些字元手動輸入到「自訂字元」的文字框中以確保它們被包含在內。
使用場景
以下是字體子集化能夠發揮最大效益的幾個常見情境:
改善網頁效能指標 (Core Web Vitals)
載入數十 MB 的中日文字體會嚴重阻塞網頁渲染,導致文字遲遲無法顯示 (影響 LCP 與 FCP 指標)。
解決方案: 僅將網頁標題或內文實際會用到的字元做子集化處理,將字體檔案壓縮至幾百 KB,讓文字能瞬間渲染顯示。
手機 App 與遊戲開發
行動裝置的應用程式和遊戲對於下載的容量包大小與儲存空間都有著嚴格的限制。
解決方案: 將 UI 介面與靜態對話框所需要的特定字元提取出來,打包進 App 內,大幅降低整體的容量負擔。
一頁式著陸頁 (Landing Page)
在行銷活動網頁上,想要在標題使用設計感強烈且引人注目的特殊字體,卻又不想犧牲載入速度。
解決方案: 產生一個只有幾十個字的超輕量字體,只涵蓋標題文案所需的部分,在保有設計美感的同時維持極速載入。
HTML 電子郵件與 EPUB 電子書
許多郵件客戶端會封鎖外部資源的載入,而 EPUB 電子書對於內嵌檔案也有大小限制。
解決方案: 將子集化後的極小字體檔案轉換為 Base64 格式並直接嵌入 HTML 或 EPUB 之中,確保在不違規的情況下顯示一致的字體風格。
技術說明
使用 opentype.js 實現用戶端處理
本工具的技術核心是開源的 opentype.js 函式庫。不論是解析字體檔案的結構、提取您指定的字元資料,還是重新封裝建立一個新的子集字體檔案,這一切流程都完全在您瀏覽器的 JavaScript 執行環境中完成。
與傳統依賴伺服器運算的字體處理工具相比,這種方式省去了在網路上來回傳輸龐大字體檔案的時間與頻寬,處理速度極快。更重要的是,這保障了絕佳的隱私與安全性,因為您的字體檔案 (即便包含了嚴格的商業授權) 永遠都不會離開您的電腦。
發送反饋
請告訴我們您的想法,以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.