讓 WordPress 使用精美的字體圖示 (Font Icon)

網頁設計過程中,經常會遇到小圖示在手機上顯示比較模糊的問題,亦或是在 Retina 螢幕上顯示的大小正常,一旦放大螢幕後圖示又變得模糊不清,針對試圖模糊的問題,現在設計師們發現了一種不錯的解決方法,就是將圖示字體化 (Font Icon)。

這就是圖示字體化 (Font Icon) 的起源,「字體圖示」顧名思義就是使用小圖示當作字體,只需要打入對應的代碼,或是加上固定名稱的樣式,就能夠產生一個小圖示。

 

使用字體圖示的優勢

字體圖示在使用上除了圖像清晰度之外,比起圖片影像還有哪些優勢呢?

  1. 輕量性
    一個字體圖示比一系列的圖像(特別是在 Retina 螢幕中使用雙倍圖像)要小。一旦字體圖示載入後,圖示就會馬上渲染出來,不需要下載一個圖片。可以減少 HTTP 請求,還可以配合 HTML5 離線儲存做性能優化,這也是網站優化的考量要點。
  2. 靈活性
    字體圖示可以透過 CSS 的 font-size 屬性設置其任何大小,還可以加各種文字效果,包括顏色、懸停狀態、透明度、陰影和翻轉等效果,且可以在任何背景下顯示。使用圖片的話,必須得為每個不同大小和不同效果的圖像輸出一個不同文件。
  3. 兼容性
    字體圖示支援所有現代瀏覽器,包括 IE 舊版本。關於各家瀏覽器詳細兼容性可以點選【canIuse】網站。

免費使用的字體圖示

在這個資訊爆炸快速的時代,用最省力的方式當然是最好的,加上近年來 Bootstrap 的興起,連帶搭配許多 Icon Font 都是免費且容易被大眾所接受的,關於免費的 Icon Font 可以參考下列網站:

  1. Entypo
  2. IcoMoon
  3. Fontello
  4. Typicons
  5. Ionicons
  6. Font Awesome

字體圖示的使用方式

這幾個網站的使用方式都差不多,第一個步驟一定得載入他們的 CSS,以 Font Awesome 來說,這是一個有搭配 Bootstrap 的 Font Icon 網站,相較於其它網站必須自己輸入對應的 Unicode來說,更為便利使用,因為只需把要顯示的圖示代碼放在<i></i>裏頭,要輸入對應的 class,這個<i></i>就會變身成為對應的圖示。

RelatedPost

推薦閱讀ಠ.ಠ  如果使用 CDN 來縮短頁面的載入速度以達到網站優化的效果

發表留言