跳至內容
返回部落格

"Mac 離線字型子集:將中日韓字型精簡為 WOFF2"

Leibniz Li

@leibnizli
+

製作網站、網頁應用程式或數位簡報時,你是否遇到過這種情況:終於為主標題找到合適的中文、日文或韓文(CJK)字型,卻發現單一 TTF 就有 10MB 甚至更大。放到網頁後,版面立即出現,標題卻要等幾秒才顯示;再加入不同字重,首次載入效能就會大幅下降。

問題的核心不是字型本身,而是「完整字元集」。完整中日韓字型包含數萬個字形,但網站標題、橫幅或簡報可能總共只用到二十個字元。

字型子集化就是移除不需要的字元,僅保留實際使用的字形。處理後,10MB 字型可能縮小到幾十 KB,體積降低多個數量級。

過去,這意味著在終端機輸入冗長難懂的 pyftsubset 指令,或把字型上傳到不熟悉的線上服務。商業字型受嚴格授權約束,上傳到第三方伺服器可能讓公司資產與法規遵循面臨風險。

現在有更簡潔的方案:WebFont: Subset & Convert。這款專為 Mac 設計的原生桌面工具,將複雜的字型子集工程變為順暢的點擊操作。

WebFont

順暢的 Mac 體驗:精確產生子集

WebFont 將複雜流程簡化,提供兩種直觀方式定義子集範圍:

  • **目前選取模式:**在視覺網格中點擊需要的字形,選取什麼就保留什麼。
  • **文字輸入模式:**直接貼上文案,或拖入 .txt 檔案。工具自動擷取不重複字元,確定精確範圍,並支援常用日文、韓文字元等預設 Unicode 區塊。

貼上標題或橫幅文案,其餘交給 WebFont。需要的字元全部保留,不需要的全部移除。

不止刪字元:精細控制 OpenType 表

多數線上工具止於刪除未使用字元,但這還不夠。字型不只儲存向量形狀,還包含處理複雜連字和進階排版邏輯的 OpenType 排版表,如 GSUB、GPOS。對某些網頁用途,這些資料可能成為不必要的載入負擔。

WebFont 提供三種策略,讓字型精簡像調整 Mac 系統設定一樣直接:

  • **保留全部排版特性:**適用於複雜連字、樣式替代等進階排版效果。
  • **僅保留必要定位:**移除多餘替換邏輯,保留基本定位,縮小檔案並維持日常文字顯示。
  • **移除全部排版表:**盡可能壓縮,只保留基本內容;使用前需確認字形仍正確顯示。

更專業的使用者還可按特性標籤精確選擇保留或移除 OpenType 功能,取得細緻控制。

為前端開發者設計:一鍵匯出網頁字型套件

擁有精簡字型只完成了一半。網頁使用還需要編寫 @font-face、定義 unicode-range,並製作測試示範頁。

WebFont 代勞這些重複工作。使用網頁字型套件匯出,一次點擊即可產生完整的正式用資源:

  • **fonts/ 目錄:**包含 WOFF2 和 WOFF。現代瀏覽器載入高壓縮 WOFF2,較舊瀏覽器可回退到 WOFF。
  • **即用 CSS:**自動產生樣式表,包含 @font-face 和子集精確的 unicode-range
  • **demo.html 預覽:**可立即測試不同字級,還包含「字元 → Unicode → HTML 實體」參考表,便於除錯。

高度精簡的字型配合自動產生的 unicode-range 分段,可顯著改善中日韓網頁字型的效能瓶頸。

預估與驗證:安全的本機流程

許多工具像「盲盒」:產生後才發現缺字,只能刪除重做。WebFont 則在寫入前透過「子集預覽」即時給出預估。

  • **預估檔案大小:**選定字元時,即可查看 WOFF2/WOFF 的預計體積。
  • **缺少字元警告:**貼上文字不在原字型中時,立即標紅,避免部署後才發現缺字方塊。

寫入 Mac 磁碟前,WebFont 還會執行嚴格內部驗證,檢查解碼有效性、必要表和重複 Unicode 對應衝突,及早發現問題,協助輸出健康可用的字型檔案。

重視隱私:字型始終在 Mac 上

對企業使用者和設計師,隱私與商業授權要求尤為重要。

WebFont 的剖析、子集產生和格式轉換都在 Mac 本機離線完成。**無需網路、雲端上傳或外部伺服器 API。**商業字型和未發布行銷文案留在自己的裝置上,即使國際航班沒有 Wi-Fi,也能處理字型子集。

總結

字型的核心使命是傳達資訊,字型子集化讓資訊在網頁上更快、更高效地呈現。

WebFont 將繁瑣、易錯且有法規遵循風險的命令列任務,整合為簡潔專業、完全離線的 Mac 原生工具:從字元擷取、OpenType 表控制,到產生前預估與驗證,再到一鍵網頁字型套件匯出,全面支援字型精簡。

如果你是前端工程師、UI/UX 設計師,或經常處理 CJK 字型效能問題的 Mac 使用者,WebFont 值得成為 Dock 中的常用效率工具。