取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

你的網站是否也用了很多小圖示，例如 "首頁"、"留言對話泡泡"、"Email" 等等？這些圖檔雖然體積小，但每個檔案的載入都需要耗費一個 http 請求，是影響網頁載入速度的一個小原因。

最早為了解決這個問題，出現「CSS SPRITE」技術，將多個小圖合併為一張圖，減少了大量 http 請求。但由於手續繁雜、加上管理不便，沒什麼人有耐心採用這項技術。

後來發展出「ICON FONT」，把小圖示製作成字形，不但可減少 http 請求，每個圖示還能向量無限縮放尺寸，簡直是劃時代的技術。其中最有名的是「FONT AWESOME」這套字型，包含了不少網頁常用圖示，是許多網頁範本的愛用字型。

不過最近發現的驚奇是，其實從遠古時代就一直存在的 UNICODE 特殊符號，會是網頁小圖示更方便的選擇，本篇將詳細介紹他的優點。

(示意圖出處: foodiesfeed.com)

先簡單看一下 Unicode 特殊符號的效果，下圖是本站之前側邊欄使用的小圖示：

Image may be NSFW.
Clik here to view.

目前已經全面汰換成 Unicode 圖案：

Image may be NSFW.
Clik here to view.

一、UNICODE 與 FONT AWESOME 比較

Font Awesome 算是 Icon Font 的代表性字型，因此作為比較基準。

1. 字型檔

兩者都需要載入外部字型檔，雖然減少了小圖示的 http 請求，不過字型檔都不小，且 Unicode 的字型檔更大。

然而網頁小圖示使用的數量並不多，Unicode 字型檔有技巧可以只載入需要的特殊符號就好，如此檔案傳輸量反而遠低於 Font Awesome，後面會詳述。

2. 符號數量

符號數量越多，代表字型檔案越大。目前 Font Awesme 官網公布的數字為，4.3 版含 519 個圖案。

而 Unicode 各國文字的數量太多先略過，屬於圖案的部分超過一千個，可參考「Unicode 表情圖案 + 特殊符號一覽表」。

兩者皆不斷更新，持續有新圖案推出，

3. 使用方式

這一項才是真正讓 WFU 想採用 Unicode 的一點，主要原因為 Font Awesome 字型的使用方式讓我覺得不方便，可參考「官網範例」，例如想要顯示照相機圖案，其使用的語法為：

<i class="fa fa-camera-retro"></i>
這麼一大串語法還滿麻煩的，對於輸入不太方便，並非 WFU 想追求的懶人法。

使用 Unicode 的話，這一切就能懶人化，先查閱「Unicode 表情圖案 + 特殊符號一覽表」，找到對應的圖案，例如火箭圖案，那麼在網頁想顯示的地方，直接擺上 Html 代碼：

🚀
輸入以上字元就行了，是不是方便很多呢？

Image may be NSFW.
Clik here to view.

二、最佳安裝方式

在網頁安裝 Unicode 字型的方式，上一篇「如何讓 Unicode 特殊符號在網頁上正常顯示？」已經有簡單的教學，說明如何外連「Open Font Library」提供的字型檔。而其缺點為，必須載入整個 Unicode 字型檔，且檔案不小，以下說明只載入特定字元的方法。

1. 字型檔分流路徑

首先找出 Open Font Library 所提供的「Segoe UI Symbol」字型路徑：

http://openfontlibrary.org/assets/fonts/segoe-ui-symbol/e729ed87ea736b6b2c6f64550775452f/523ab078aac307d0e576a80bc155d32e/SegoeUISymbolRegular.ttf

要直接外連也可以，但外部伺服器哪天出問題也不是我們能控制的，最保險還是上傳到自己的網路空間，例如 Google Drive，可參考「Google Drive 檔案分流教學」，分流後取得外連網址。

2. 安裝語法

接著在範本中 </head> 之前，插入以下 CSS 語法：

<style>
@font-face {
font-family: 'SegoeUISymbolRegular';
src: url('http://openfontlibrary.org/assets/fonts/segoe-ui-symbol/e729ed87ea736b6b2c6f64550775452f/523ab078aac307d0e576a80bc155d32e/SegoeUISymbolRegular.ttf') format('truetype');
unicode-range: U+1F680, U+1F683, U+1F684;
}
.symbol{font-family: 'SegoeUISymbolRegular';}
</style>

綠色字串請參照「1. 字型檔分流路徑」自行改為分流後的路徑。
紅色字串為代表 Unicode 圖案的編碼字串，請參照「Unicode 表情圖案 + 特殊符號一覽表」，查閱 "CSS" 這一行的字串，例如將火箭圖案的編碼 "\1F680" 改成 "U+1F680" 即可。訣竅很簡單，就是將 "\" 字元改為 "U+"。
上面程式碼的舉例用了三個圖案，分別為 "火箭"、"火車"、"高鐵" 圖案，如果整個網站只需要用到這三個圖案，那麼紅色字串的部分，請填入這三個編碼即可，彼此間用小寫逗號 "," 隔開。
藍色字串如用不到可刪除，請見之後的說明。

三、使用方式

有兩種使用方法，讀者可根據自己的需求來選擇：

第一種準備動作多，使用方法字串較短。
第二種準備動作少，使用方法字串較長。

方式-1：

如果 Unicode 字元確定只在網頁某個區塊使用，例如文章區塊(假設 class 名稱為 post-body)，那麼可參考「網頁中英文字型跨平台設定最佳化」→「六、依網頁不同區塊設定 font-family」，記得在文章區塊的 font-family 之中，加入這個字型 "SegoeUISymbolRegular"，例如將上述程式碼的藍色字串改為：

.post-body{font-family: 所有原本的字型名稱, SegoeUISymbolRegular; }

完成以上設定後，在文章區塊就能隨意加入你想顯示的 Unicode 圖案。例如想加入火箭圖案，在「Unicode 表情圖案 + 特殊符號一覽表」查到火箭的 "HTML" 編碼為 ""，在文章區塊直接使用此字串即可。

方式-2：

如果對 CSS 不熟悉，「使用方式-1」的方法做不來，那麼可以保留原本安裝程式碼中的藍色字串，然後在網頁中任何想使用 Unicode 圖案(例如火箭符號)的地方，插入以下語法：

<span class="symbol">🚀</span>
這會是比較簡單的方法，若要使用其他符號，請查詢 WFU 製作的「Unicode 特殊符號一覽表」來替換 HTML 編碼字元。