在國外網站很常看到引用其他公司企業的 LOGO 做為宣傳產品的手法,例如放上一些標誌宣稱這些公司都是他們旗下的客戶,但很多時候實在也無從考據,總之這個作法在國外很常見,如果你有經常使用國外服務應該都會看到(而且好像還有一點效果),而這幾年在中文網站也會看到類似方法,無論如何,若你想要一些知名品牌幫你「背書」,不用再辛苦去 Google 搜尋找這些標誌素材,也不用打開 Photoshop 或其他繪圖軟體調整標誌色彩,有人已經幫你準備就緒。
本文要推薦的「Font Famous」是一個免費向量圖 LOGO 字型,收錄大約 50 個知名品牌,使用者透過一段樣式表就能將字型載入,利用原始碼的 class
在網頁上顯示對應標誌,不僅可以有相同樣式,亦可使用 CSS 樣式表調整顏色、大小或位置,相較於個別置入圖片來說載入速度更有效率,而且也更節省時間。
常在國外網站首頁看到顯示出各種品牌 LOGO:
Font Famous 另一特色是直接給出 jsDelivr CDN 分流網址,使用者無需自行託管檔案,打開的時間更短,避免因此而拖慢網站載入速度,Font Famous 收錄的品牌除了媒體外,還有一些知名的科技網站和服務,不過都是以國外品牌為主。
網站名稱:Font Famous
網站鏈結:https://fontfamous.com/
使用教學
STEP 1
首先,打開 Font Famous 網站首頁就會看到這套圖示字型的 jsDelivr CDN 鏈結,直接把這段樣式表貼到網站的 區塊就能載入相關檔案。
STEP 2
底下有一段 Easy Implementation 教你如何顯示特定的 LOGO(列表在最下方),簡單來說,只要一段語法就能顯示,其實和一般圖示字型原理相同。
如果你想在線上測試原始碼和顯示樣式,點選 Try it on JS Bin! 就能打開第三方服務,測試看看顯示出來的效果如何。
STEP 3
Font Famous 網站最下方有完整的標誌一覽,點選後會自動將程式碼複製到剪貼簿,貼到網站要顯示的區塊就能看到效果,使用 Font Famous 好處是不用再去辛苦找這些企業的標誌圖案,使用字型方式載入也比較不會拖慢網站速度。
值得一試的三個理由:
- 將知名企業 LOGO 製作為字型以樣式表快速載入
- 向量圖格式無論放大縮小顯示皆不失真
- 透過 jsDelivr CDN 載入樣式表和相關檔案