字型建構器

用已轉為輪廓的 SVG 圖形建構單色或彩色圖示字型和網頁字型，或在基於 TrueType 的靜態來源字型中新增和替換字形。

Font Builder 旨在用規範的向量圖形可靠地製作字型。對於不支援的 SVG 和字型特性，它會拒絕處理，而不是悄悄修改。

用 SVG 建構新字型

如果已有圖示圖形，並希望以字型形式發布，請使用以下流程。

1. 開啟 Font Builder。
2. 將已轉為輪廓的 SVG 檔案拖入字形清單。
3. 檢查字形名稱和 Unicode 值。
4. 執行 Preflight Check。
5. 匯出 TTF、WOFF、WOFF2，或包含 CSS、示範 HTML 和 metadata.json 的完整網頁字型套件。

在來源字型中新增或替換字形

Font Builder 可以匯入基於 TrueType 的靜態來源字型。

• 向來源字型新增 SVG 字形。
• 用 SVG 圖形替換現有 Unicode 字形。
• 使用 Browse Glyphs 從來源字型中選擇替換目標。
• 編輯來源字型時保持被替換字形的 ID 穩定。
• 如果需要稍後繼續，將工作儲存為 .webfontproject。

SVG 要求

Font Builder 要求使用已轉為輪廓的靜態 SVG 圖形。

匯入之前，應將圖形效果平面化。不支援的輸入包括可編輯 SVG 文字、點陣圖、濾鏡、遮色片、裁切路徑、指令碼、動畫、影片、音訊、iframe 和外部資源。

SVG 範本

繪製圖示之前，請先匯出 SVG 範本。範本包含基線和邊界參考線，便於在匯入前讓圖示與字型度量對齊。

彩色字型

Font Builder 可以用輪廓 SVG 圖形建構彩色字型。彩色模式會透過 COLR/CPAL 保留支援的純色填色、描邊、線性／徑向漸層和透明度，為支援的漸層／效果字形提供 SVG 後備，並讓 currentColor 跟隨文字顏色。額外調色盤可以標記為適用於淺色或深色背景。

使用 Import Font… 可將支援的 COLR/SVG 字形作為向量素材匯入。不支援的彩色效果或僅有點陣圖的字形可能以單色輪廓匯入，並顯示提示。

網頁字型套件輸出

網頁字型套件可包含：

• 字型檔案。
• 包含 @font-face 的 CSS。
• 示範 HTML。
• 中繼資料。
• 字形預覽。
• 用於圖示字型的 HTML 片段。

最佳實務

• 圖示字型使用 Unicode 私用區的值，除非明確需要標準 Unicode 對應。
• 保持圖示 SVG 在視覺上置中，並對齊到相同畫布。
• 每次匯出之前都執行預檢。
• 發布正式字型之前修復紅色列中的問題。