你是否遇過這種情況：精心製作的 PNG 圖標在 Retina 螢幕或頁面放大時變得模糊，而文字卻依然銳利？解決之道其實很直觀——將圖標轉為 Web Font（網頁字體）。本文將手把手教你使用免費工具 IcoMoon，從向量繪圖到 CSS 套用，完整實踐圖標字體化流程。

為什麼選擇字體圖標？

• 體積更小：單一字體檔比多組倍圖 Sprite 更輕量，載入即渲染，無額外圖片請求。
• 無限縮放：透過 font-size 任意調整大小，永不失真，告別為每個尺寸輸出圖片的痛苦。
• 樣式靈活：顏色、陰影、旋轉、漸變等 CSS 文字特效全都能用，任意背景下完美呈現。
• 相容性佳：支援所有現代瀏覽器，含 IE 低版本（配合 EOT 格式）。

工具介紹：IcoMoon

IcoMoon 是基於 HTML5 的線上應用，內建海量免費圖標庫，支援匯入自製 SVG，一鍵產出 WOFF/EOT/TTF/SVG 多格式字體包，並自動生成對應 CSS 與示例頁面，是目前最省時的字體圖標產生器。

製作步驟詳解

1. 準備向量插圖

使用 Illustrator、Inkscape 等可輸出 SVG 的工具繪製。注意：

• 圖標必須為單色（顏色不限，建議黑色）。
• 所有圖標畫布尺寸一致（如 200×200 px），避免字體基線參差不齊。
• 過寬/過高的圖標需調整寬高比，確保視覺重心一致。

2. 清理路徑

放大檢視每個圖標，刪除多餘錨點、修正不閉合路徑。在 Illustrator 中善用「尋找邊緣」或「路徑查找器」合併重疊形狀（如星星扣洞），確保小尺寸下辨識度。

3. 匯出 SVG

將單一圖標複製至新畫板（200×200 px），置中縮放。選擇「另存為 SVG」，使用預設設定即可。批次處理所有圖標。

4. 匯入 IcoMoon

開啟 IcoMoon App → 點擊 Import Icons → 選取 SVG 檔（可多選）。匯入後圖標會出現在「Your Custom Icons」區，黃色高亮表示已選中將納入字體。

5. 產生字體

點擊底部 Font 按鈕進入設定：

• 為每個圖標指定 Unicode 碼位（如 q、w、e...），或直接使用 Private Use Area (PUA) 自動分配。
• 命名字體（如 my-icons），方便 CSS 引用。
• 除非需與標準字體混排，否則度量指標保持預設即可。

6. 下載並部署

點擊 Download 取得壓縮包，內含：

• fonts/：WOFF、EOT、TTF、SVG 四種格式。
• style.css：現成的 @font-face 與類別樣式。
• demo.html：使用範例。
• IE6/7 相容用的 JS 修補腳本。

將 fonts/ 資料夾放入專案，將 style.css 內容合併至主樣式表（或另存為 icon-font.css 獨立引入），並修正 @font-face 中的 url() 路徑為相對路徑。

7. CSS 調用範例

兩種常見寫法：

方法一：data-icon 屬性（配合偽元素）

<div aria-hidden="true" data-icon="g"></div>
/* CSS */
[data-icon]:before {
  font-family: 'my-icons';
  content: attr(data-icon);
  speak: none; /* 螢幕閱讀器忽略 */
}

方法二：語義化 class（適合內文內嵌）

<span class="icon-home" aria-hidden="true"></span>
/* CSS */
.icon-home:before { content: "\e900"; }

帶連結的圖標

<a href="/" class="icon-link" data-icon="s"></a>
.icon-link { font-family: 'my-icons'; color: #666; text-decoration: none; }
.icon-link:hover { color: #999; }

進階技巧

• 多色圖標：利用 text-shadow、background-clip: text 或疊加多個偽元素實現多色效果。
• 動畫：配合 @keyframes 讓圖標旋轉、彈跳、變色。
• 版本管理：每次增減圖標後重新下載字體包，建議以語意化版本號命名資料夾（如 fonts/v1.2/），避免快取問題。

掌握圖標字體化，不僅解決高解析度適配難題，更將圖標納入前端元件系統，實現「設計即代碼」的高效協作。立刻嘗試 IcoMoon，讓你的圖標在任何裝置上都銳利如初！