前言：為什麼選 Icon Font？

Icon Font 以字體文件替代圖片，已成現代前端標配。淘寶、新浪微博、內部專案「小浪人」均大規模採用。

核心優勢與局限

優勢	局限
體積極小（同組圖標 13KB vs 圖片 50-100KB+）	僅支援單色（多色圖標/表情包不可用）
矢量無失真縮放	增加重構成本（需字體生成流程）
CSS 任意控制顏色/大小/陰影/動畫	舊瀏覽器相容需多格式
Base64 內嵌 CSS，零 HTTP 請求	語義化較弱（需映射表）
維護極易（單一文件管理全站圖標）	像素級微調不如 SVG 靈活

工具鏈：極簡雙工具

• FontCreator：字體編輯核心工具（付費，有試用版）
• Photoshop：矢量轉位圖（PNG24 透明背景）
• 線上轉換：Font Squirrel Webfont Generator（Basic 模式即可）

標準化製作流程（SOP）

1. 設計師出矢量圖（AI/SVG/PS 形狀圖層）
2. PS 柵格化匯出：圖層右鍵「柵格化」→ 存為 PNG24（透明背景）
   💡 若導入變形，先將矢量等比放大 4-8 倍再匯出
3. FontCreator 導入：File → Import → 選 PNG → 映射至 Unicode 碼位（建議使用 Private Use Area: E000-F8FF）
4. 關鍵度量調整（最關鍵步驟）：
   - 左右側方距：同類圖標必須一致，保證對齊
   - Baseline 基線距離：統一垂直基準
   - 字體單位：建議 1000-2048 units/em

匯出多格式：TTF → Font Squirrel 轉 EOT/WOFF/WOFF2/SVG

建立管理頁面：含圖標預覽、Unicode 碼、HTML 實體碼、CSS class、使用範例

CSS 引用與使用兩種方式

方式一：HTML 直接輸入字符（推薦，相容性最佳）

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype'),
       url('myicons.svg#myicons') format('svg');
  font-weight: normal; font-style: normal;
}
.icon { font-family: 'MyIcons'; }

HTML：<span class="icon"></span>（ 為 Unicode 映射字符）

方式二：CSS 偽類注入（維護易，IE6/7 不支援）

.icon-home::before { content: "\e001"; font-family: 'MyIcons'; }

避坑指南：血淚經驗總結

1. 跨域問題：字體文件同域部署、或配置 CORS Header、或 Base64 內嵌 CSS
2. 絕不可刪除 FontCreator 開頭保留字符（.notdef、space、CR 等），否則多數瀏覽器無法識別字體
   
3. PNG 導入變形：PS 中矢量等比放大後再匯出 PNG24
4. Unicode 映射表必備：團隊協作時，設計/前端/後端共用同一份映射文檔

結語

Icon Font 以微小體積換取極致維護性與靈活控制，是現代前端必備技能。建立標準化 SOP、團隊共用組件庫，讓圖標管理從「雜亂無章」走向「系統化資產」。