2015年6月26日

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

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

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

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

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

(示意圖出處: foodiesfeed.com)

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

side-column-old


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

side-column-new



一、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 代碼:

&#x1F680;
輸入以上字元就行了,是不是方便很多呢?



二、最佳安裝方式


在網頁安裝 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">&#x1F680;</span>
這會是比較簡單的方法,若要使用其他符號,請查詢 WFU 製作的「Unicode 特殊符號一覽表」來替換 HTML 編碼字元。


四、補充及使用效果


如果覺得 Unicode 特殊符號的色彩單調,其實就像一般字型一樣,都可以用 CSS 做各種效果。如果熟悉 CSS 語法,利用上色、背景色、放大縮小、動畫等等,就能讓 Unicode 圖案活潑起來。

最後附上 WFU BLOG 其他區塊使用 Unicode 圖案的效果,由於 Unicode 圖案選擇性高,數量遠超過任何一款 Icon Font,相信讀者都能找到各種實用的小圖示,加快網頁的載入速度。


標題區塊:

label-new


首頁圖案:

next-prev-area


文末資訊:

post-footer-new


更多字型相關主題:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。