高解析度行動裝置下，字體圖標以向量無損縮放、CSS 可控色彩大小陰影、單一請求載入等優勢取代圖片圖標。本文分享零成本、無需安裝額外軟體的完整自製流程：AI 繪製 SVG → 壓縮 ZIP → IcoMoon 線上生成字體套件 → CSS 引用。

工具與準備

• Adobe Illustrator（任意支援匯出 SVG 版本）
• 壓縮軟體（支援 ZIP）
• 瀏覽器存取 IcoMoon App

標準化繪製規範（關鍵）

1. 新建文件 512×512 px（經測試此畫板尺寸與網頁字號完美對應）。
2. 純黑色描邊/填色，無背景、無漸層、無透明度、錨點極簡化、單一複合路徑最佳。
3. 視覺大小統一、風格一致、四邊留白依設計需求。
4. 另存為 SVG（預設 SVG 1.1），檔名英數+連字號（如 icon-home.svg），可拖入瀏覽器預覽驗證。
5. 所有 SVG 放入同一資料夾，壓縮為 ZIP（建議 2 個以上圖標，單一圖標 IcoMoon 不產出 CSS/HTML）。

IcoMoon 生成與整合

1. 進入 IcoMoon App，拖入 ZIP 上傳轉換。
2. 選中所需圖標，點擊「Generate Font」→「Get Code」取得 Unicode 對應碼與 CSS 樣板。
3. 下載 icomoon.zip，解壓含 .eot/.svg/.ttf/.woff 四種字體格式、style.css、demo.html。
4. CSS 引用：@font-face 宣告四格式回退，使用時 <i class="icon-home"></i> 配合 .icon-home:before { content: "\e900"; }。
5. 強迫症優化：編輯 CSS 與字體檔名縮短為 iconfont.*。

注意：小尺寸（<16px）低 PPI 螢幕下可能出現筆畫模糊，屬字體光柵化特性，高 PPI 行動裝置無此問題。複雜多色圖標仍建議用 SVG Sprite 或圖片方案。