你的網站是否也用了很多小圖示，例如 "首頁"、"留言對話泡泡"、"Email" 等等？這些圖檔雖然體積小，但每個檔案的載入都需要耗費一個 http 請求，是影響網頁載入速度的一個小原因。最早為了解決這個問題，出現「CSS SPRITE」技術，將多個小圖合併為一張圖，減少了大量 http 請求。但由於手續繁雜、加上管理不便，沒什麼人有耐心採用這項技術。
後來發展出「ICON FONT」，把小圖示製作成字形，不但可減少 http 請求，每個圖示還能向量無限縮放尺寸，簡直是劃時代的技術。其中最有名的是「FONT AWESOME」這套字型，包含了不少網頁常用圖示，是許多網頁範本的愛用字型。
不過最近發現的驚奇是，其實從遠古時代就一直存在的 UNICODE 特殊符號，會是網頁小圖示更方便的選擇，本篇將詳細介紹他的優點。
(示意圖出處: foodiesfeed.com)
先簡單看一下 Unicode 特殊符號的效果，下圖是本站之前側邊欄使用的小圖示：
目前已經全面汰換成 Unicode 圖案：
一、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 代碼：
🚀輸入以上字元就行了，是不是方便很多呢？
二、最佳安裝方式
在網頁安裝 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 編碼字元。
四、補充及使用效果
如果覺得 Unicode 特殊符號的色彩單調，其實就像一般字型一樣，都可以用 CSS 做各種效果。如果熟悉 CSS 語法，利用上色、背景色、放大縮小、動畫等等，就能讓 Unicode 圖案活潑起來。
最後附上 WFU BLOG 其他區塊使用 Unicode 圖案的效果，由於 Unicode 圖案選擇性高，數量遠超過任何一款 Icon Font，相信讀者都能找到各種實用的小圖示，加快網頁的載入速度。
標題區塊：
首頁圖案：
文末資訊：
更多字型相關主題：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。