跳至內容
+

字型建構器

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

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

用 SVG 建構新字型

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

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

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

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

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

SVG 要求

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

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

SVG 範本

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

網頁字型套件輸出

網頁字型套件可包含:

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

最佳實務

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