跳至內容
返回部落格

"文字轉 SVG:在 Mac 上將文字轉換為向量輪廓"

Leibniz Li

@leibnizli
+

設計師、開發者或數位藝術家可能都遇到過這個常見需求:將單字或句子轉換為 SVG 輪廓。無論製作標誌、準備網頁應用程式的向量素材、設計海報,還是交付不能依賴本機安裝字型的排版設計,將文字變成可縮放向量圖形都是重要任務。

Adobe Illustrator、Figma 等向量軟體雖然可以將文字轉為輪廓,但對快速轉換來說往往太重;使用商業字型時,線上文字轉 SVG 工具又有隱私風險。如果只需要直接、快速且完全離線地將字型轉成純 SVG 路徑呢?

WebFont 是原生 macOS 工具,讓文字轉 SVG 簡單又安全。

為什麼將文字轉換為 SVG 輪廓?

將可編輯文字轉為 SVG 輪廓,為設計和開發帶來明顯優勢:

  1. **一致的顯示效果:**分享設計或發布網站時,無法保證使用者安裝相同字型。文字轉為 SVG 路徑後就成為圖形,可在不同裝置、瀏覽器和作業系統上保持一致外觀。
  2. **不依賴字型:**小標誌或短標題不需要捆綁龐大的網頁字型,輪廓 SVG 完全獨立。
  3. **進階編輯:**文字成為一組向量座標後,可以修改單一字形、為描邊路徑製作動畫,或套用一般文字難以實現的複雜裁切遮色片。

在 Mac 上將單字與句子轉換為 SVG

WebFont 提供專為這一用途設計的「Text to SVG」流程,無需啟動龐大的設計軟體,即可準確、快速地完成轉換。

1. 載入來源字型

將喜歡的字型檔案(TTF、OTF、WOFF 或 WOFF2)拖入 WebFont。應用程式完全在 Mac 上離線執行,可以安全使用專有或商業字型,無需擔心雲端上傳和資料外洩。

2. 輸入單字或句子

輸入要轉換的單字、片語或多行句子。WebFont 使用目前載入的字型,準確保留字形。

3. 微調排版

產生 SVG 前,可以精確控制輸出:

  • **字型設定:**調整字級;使用可變字型時,可設定所需的可變字重。
  • **版面與間距:**修改字元間距、行高和換行寬度,取得理想文字區塊。
  • **樣式:**調整對齊、圖形周圍的內距和填色。
  • **後備控制:**已載入字型缺少字元時,可允許或阻止使用系統後備字型,從而嚴格忠實於來源字型。

4. 匯出便於移用的 SVG 輪廓

點擊一次即可將 SVG 複製到剪貼簿,貼進程式碼編輯器或設計軟體,也可以儲存為獨立的 .svg 檔案。輸出只包含幾何輪廓,因此完全獨立於原字型檔案。

不止文字轉 SVG

WebFont 是全面的 macOS 字型工具,還支援:

  • **建構字型:**將已轉為輪廓的 SVG 圖形製作成新的圖示字型或網頁字型。
  • **產生子集:**根據選取字形或文字字串,產生高度最佳化、體積更小的字型子集。
  • **轉換格式:**批次轉換 TTF、OTF、WOFF 和 WOFF2。

如果經常需要把文字轉為 SVG 路徑,不必再依賴繁瑣的變通方法或有風險的線上轉換器。下載 Mac 版 WebFont,簡化字型工作流程。