網頁設計 Emoji 應用筆記

2026-06-08 11:19 PM

看到同事分享 AI 生成的網頁設計稿，選單項目搭配的圖示意思都有到位(如下示意)：

對我來說，每次要為選單找圖示搭配是件麻煩事，之前常用 fontawesome，但沒這麼好看，免費版常找不到意思相符的圖示，若要找到成套的免費 SVG 或圖示也不容易；見到 AI 生成的成品挺好看，便請教同事是下了什麼神奇提示，他說：沒，我哪懂這麼多，也沒特別交待 AI 就自己做成這樣惹。

噗，只好自己研究惹，開 F12 開發者工具一看：靠北! 啊不就是 Emoji 字元？那個常在 AI 文成群出現，多到讓人生厭的 Emoji 字元，沒想到用在網頁設計上效果不錯耶，而 AI 熟練到信手拈來，是我少見多怪。

Emoji 字元已內建在現代作業系統、行動裝置的系統字型，不需要蒐集 SVG、PNG 不用部署檔案，也不像 Font Awesome 或 Material Symbols 需額外載入 CSS 及 WOFF 檔，而且還是彩色的挺討喜。唯一缺點是大家平常已看到爛(尤其 AI 流行之後)缺乏新意，但若為功能性為主講求實用的內部系統，這點倒不是問題，不需要視覺設計人員、不用花時間找圖示，是一大強項。因此我決定花點時間，學習 Emoji 應用在網頁的正確使用方法，把它納入我的網頁設計軍火庫。

Emoji 起源與發展

Emoji 起源於日本，最早為 1999 年日本電信商 NTT DoCoMo 創製了 176 個 12x12 像素圖標用於訊息傳送，後來 SoftBank 等電信商也發明了自己的編碼，導致跨網傳送時常變成亂碼。為統一全球標準，Unicode 聯盟在 6.0 版本正式將 Emoji 納入，自此 Emoji 變成「全球通用語言」的一部分。

Apple 在 iOS 5 鍵盤加入 Emoji，隨後 Android 跟進，Emoji 迅速成為全球流行文化，且之後也繼續更新，加入不同膚色、性別中性、多樣化的食物與職業。

在 Winodws 可按 Win + . 叫出表情圖示輸入視窗(如下圖)；macOS 為 Command + Control + Space；手機也都有 Emoji 鍵盤。

unicode.org 有個 Emoji 完整清單是最權威的參考資料：
註： Browser 是當前瀏覽器渲染的結果、Sample 為 Unicode 官方提供的參考圖像，通常用 Apple 或 Google 的設計作為代表、GMail 是它在早期 Gmail 網頁版的樣式、SB/DCM/KDDI 是日本三大電信商過去對映的樣式、CLDR Short Name 則是官方標準名稱。

(Emoji 還有針對不同膚色、不同性別認同的版本，考慮十分周全)

網頁使用 Emoji 注意事項

要在網頁插入 Emoji 有幾種方式：

使用表情圖示輸入視窗輸入
從 Emoji 清單複製貼上或查 Unicode 碼輸入 &#x1F6000;
叫 AI 幫忙挑選生成

雖然說新版 Windows/macOS/Linux 都已支援 Unicode Emoji，但顯示起來可能略有不同，有名例子是 2016 的研究，當時不同手機的露齒笑 Emoji，在部分平台給人的感覺是咬牙切齒，意義相反。

再來就是相容性的問題，Unicode　Emoji 字元會不斷擴充更新，若使用較新規格，在舊版手機或作業系統中可能會變成打叉方塊 [X]。此外，涉及膚色、性別議題的 Emoji 可能涉及文化敏感性，應用於對外網站時需留意。

不過，若將應用於企業內部系統，由於客戶端受控版本一致，使用者群體已知，上述因素較不會導致風險。

Emoji 該用什麼字型？

Emoji 本質上是文字，依賴作業系統內建「彩色字體」(Color Fonts) 渲染。不同平台有所差異，建議如下：

Windows 10/11 使用 Segoe UI Emoji，微軟開發的 COLR/CPAL 向量格式，優點是檔案小、縮放不失真，不過在 Windows 7 為黑白框線。
macOS / iOS 使用 Apple Color Emoji，SBIX 格式，為多種尺寸的 PNG 圖片拼湊而成，目前公認最細膩、立體感最強的 Emoji 字體，但字體檔案較大。
Android 使用 Noto Color Emoji，使用 CBDT/CBLC 格式(也是點陣圖)，但三星或小米等廠商可能會替換成自家設計的 Emoji 字體

若想確保最佳 Emoji 顯示相容性，可考慮使用以下樣式設定：

  /* 優先使用系統預設 UI 字體，通常會自動包含正確的 Emoji 渲染 */
body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

回歸 SVG

依賴系統字體，永遠存在顯示不一致的風險。因此有一些開源解決方案，例如：Twitter Emoji[註] 可將文字形式的 Unicode Emoji 掃描出來，並替換為統一格式的圖片(SVG 或 PNG)，解決不同作業系統、不同瀏覽器顯示 Emoji 不一致(或顯示「豆腐塊」)的問題。
註：感謝讀者大軒分享，Twitter 已放生 twemoji (停在 v14)，故不會支援新版 Unicode 增加的 Emoji 字元，建議改用社群維護版 https://github.com/jdecked/twemoji 仍持續更新到 v17。

在原本使用 Emoji 的網頁引用 twemoji.min.js，並加上 CSS 及 JavaScript 解析置換程式：

<style>
img.emoji {
    width: 1em;
    height: 1em;
    margin: 0 .05em;
    vertical-align: -0.12em;
    display: inline-block;
}	
</style>
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<script>
	twemoji.parse(document.body, {
		folder: 'svg',
		ext: '.svg'
	});
</script>

如下圖，原本的 Emoji 字元便會被置換成 SVG 囉~