之前我們曾介紹過一款足以稱為網頁設計救世主的工具:Font Awesome, 透過CSS和HTML5的功能, 就可以直接在網頁上以字型方式顯示常用的圖案、圖示、符號等, 不僅可以顯示,還可以隨意放大縮小、改變顏色各種屬性等等, 因為基本上這些圖案就是字型, 所以CSS中所有字型可以調用的屬性都可以使用, 實在是方便而且字型圖案設計的也很漂亮。
那如果要在桌面版的軟體中使用 FontAwesome 可以嗎?
像是 Photoshop, illustrator, word, Excel, Pages, Numbers等平面設計與文書軟體, 又好比 Final Cut Pro X, adobe premiere pro等專業的影片編輯軟體等等, 畢竟無論是平面設計、文書排版、影片編輯,若是加入這些好用細緻的小圖示, 那絕對也是大便利、大加分呢!
答案是可以的喔 ^^
不過因為有些朋友是用 Font Awesome 4.7 版的,有些則是新版 5.0以上的字型,這兩種版本執行起來會有點不同,所以下面我們就兩種不同版本分開說明,一起研究看看吧。
舊版 Font Awesome V4.7 的桌面使用
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中, 只要先下載好他們的字型,安裝進去(Mac OS, Windows 都可以), 就可以當作一般字型那樣使用了。
下載 v4.7 的 Font Awesome 字型檔與安裝
由於是舊版的了,所以FA官網上預設的下載頁面都已經更新為新版的, 若是要下載舊版的FA字型,可以到他們官網的這個頁面: Font Awesome v4.7 版下載
點選下載按鈕(Download)的時候,FA會再次跳出建議你下載新版的字型,我們不管他,直接在這個跳出訊息欄最下面,點選下載 4.7 版就可以了(No thanks, Just download Font Awesome 4)。
下載之後是一個 Zip 的字型壓縮檔,解壓縮,直接把字型安裝到系統裡。這樣就可以了。
Font Awesome 4.7 要如何選字呢?
安裝完之後,相信大家一定會很好奇? 這六百多個小圖示/符號,要怎麼『打』出來想要的小圖或符號呢?
別急,不用鍵盤打, 我們可以到這個頁面中:Font Awesome v4.7 Icons 列表 Font Awesome 有列出4.7版全部的字型圖案。
這個網頁列出來字型圖示,都是可以直接用來複製字元的,比較方便。
在這個圖示列表網頁上查詢,找到想要的圖示之後, 就複製那個圖案,提醒大家,是複製圖案本身,而不是後面的 CSS Class 的名稱喔。
複製了圖案之後,就可以直接在 Photoshop 中貼上(其他軟體也是一樣喔)。
一開始你會發現貼上的文字是亂碼狀, 沒關係,選了這個怪字,把字型改為 Font Awesome (就是先前安裝好的那個字型)就可以了 ^^
接下來我們就來看新版的 Font Awesome 怎麼使用?
Font Awesome V5 的桌面使用
跟舊版的一樣,我們要先下載,安裝字型。</p>
下載的位置:Font Awesome 5 下載(在頁面中間有一個下載按鈕:Download Font Awesome Free)
安裝好了之後, 新版會比較複雜一些,他的字型包資料夾與檔案都比較多,連字型都多 >"< 解壓縮後,開啟解開的資料夾,裡面有一個『use-on-desktop』子目錄,打開他,就會看到三個字型檔:
- Font Awesome 5 Brands-Regular-400.otf
- Font Awesome 5 Free-Regular-400.otf
- Font Awesome 5 Free-Solid-900.otf
這三個字型都安裝到系統。
使用的方式也跟舊版一樣,我們要先到他們官網的字型對照表上查看: Font Awesome 5 icon Cheatsheet 查看這個頁面也有一個小提醒,就是先點選圖示列表右上方有一個小小的 ,這樣才會顯示讓我們可以直接複製字元的功能。
除此外, 不同的字型圖示,在新版的Font Awesome 裡,有時也要選擇不同的字型檔,還記得我們剛剛是安裝了三個字型檔對吧?
怎麼知道不同的圖示是要用哪個字型檔呢?
在官網圖示列表的那個頁面側邊欄,有分不同的類型,我們主要是看
- Solid
- Regular
- Brands
這三個類別,這三個類別的圖示,就是對應剛剛安裝的三個不同的字型檔。
雖然說安裝了三個字型檔,但是在 Photoshop 或其他的應用程式中,的字型列表中,會出現兩個字型名稱,一個是 Font Awesome Brands,另一個則是 Font Awesome Free,而第二個的 Font Awesome Free 包含兩個屬性,一個是標準,一個是 Solid,這樣就是全部的三個字型了。
圖示列表中的 Solid 就是對應到 Font Awesome Free>Solid。 圖示列表中的 Regular 就是對應到 Font Awesome Free>標準。 圖示列表中的 Brands 就是對應到 Font Awesome Brands。
結論:需要升級嗎?
當然這個問題還是看個人。
4.7 舊版的字型總計有 675 個圖示,而新版的則有 1,109 的圖示。
可是舊版安裝以及使用上,相對簡單輕鬆, 因為就是對應一個字型,不用查完圖示之後,還要看是對應到哪一個字型檔,比起新版的真的方便很多。 尤其是一次要處理很多的圖案時,新版就有點太麻煩了!
另外, 新版有些圖示,特別是品牌Logo相關的類別(Brands),有因應原廠品牌的更新而重新設計,像是 Youtube,新版舊版的圖示是不一樣的,因為 Youtube 的 Logo 有更新過了。 Font Awesome v5之後,也多了一些新的圖示,像是 Apple Pay 之類的(在舊版的時期還沒有出現)。
所以就看大家有沒有用到新版的好處,如果沒有的話,其實就沿用舊版,不用升級。 如果還沒有安裝過,那麼當然就直接用新版的比較好囉 ^^
一起試試看吧!