Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案

Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案

愛台灣可以有很多表現方式,例如拍照上傳社群網站讓世界看到台灣的美,走訪各鄉鎮看看台灣大街小巷,雖然大家都很熱衷出國自助旅遊,但其實台灣也有不少很美麗、很有特色的地方,可惜假日出去總是人擠人,不在台灣還是會想念台灣美食。對於亞洲鄰近國家觀光客來說,他們也非常喜歡台灣,不少日本人很愛到台灣旅遊,都能拍出讓我覺得很不像台灣的相片。

接下來要介紹的「Taiwan Icon Font」很有趣,這是一套屬於台灣在地的免費圖示字型,由一位在台南生活的日本設計師 holoko 和住在台灣的英國程式設計師 Rob 共同開發。第一個版本是以「台灣旅遊」做為發想而創作出很多台灣旅遊景點,其中也包括不少台灣在地文化、交通運輸、美食或品牌等等,像是台北 101、中正紀念堂、珍珠奶茶、台灣啤酒、捷運或茄芷袋(我也是寫這篇文章才知道這個東西的名字…)。

Taiwan Icon Font 提供四種格式:woff、woff2、svg 和 otf,開放使用者免費下載!更重要的是這套圖示字型可運用於網頁上,透過樣式表、特定代碼方式載入圖示,就能在網頁快速展示各種台灣會出現的地標、國旗、景點、交通工具、文化、美食、特有種或是品牌等等,不過有個小問題是當前 Taiwan Icon Font 好像還沒有選擇一個明確的授權規範,我想不久之後就會改善這個問題。

Taiwan Icon Font
https://www.twicon.page/

使用教學

STEP 1

開啟 Taiwan Icon Font 網站,首頁會有相關背景介紹,還有這套圖示字型的特色,點選上方選單的「Icons」可以看到目前所有圖示,當這些生活中的景點、建築物、交通工具或美食被製作成圖片後真的有一種很神奇的感覺。

不過至少如果未來在開發應用程式、製作網頁或其他專案時要用到這些意象就可以從這一套 Taiwan Icon Font 找到現成的圖案。

Taiwan Icon Font
Taiwan Icon Font

STEP 2

點選「Get Started」就能找到 Taiwan Icon Font 下載鏈結,包括電腦上會用到的 otf 檔案、網頁會用到的 wofwof2 檔案,以及一般開發時會用到的 svg,點選下載按鈕就能一次取得這三個檔案。

Taiwan Icon Font

STEP 3

如果要使用於網頁上,可能會需要透過 twicon.css 樣式表或類似方式載入,還好解壓縮後 Taiwan Icon Font 就直接給出一個範例 html,開啟後可以看到要如何使用特定的圖案(Mark up for web),不清楚的話參考這個範例的寫法就能在頁面顯示圖案。

Taiwan Icon Font

STEP 4

有網友使用 Taiwan Icon Font 圖示製作線上小測驗遊戲,可以透過問答方式看看你對於台灣夠不夠熟悉,如果有興趣的話直接前往「TW Icon Game 台灣圖標字型遊戲」就能玩囉!(第一次只玩不到 10 分就結束了…),這個網站也開放原始碼至 GitHub。

Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案
Taiwan Icon Font 屬於台灣的免費圖示,收錄台北101、珍珠奶茶等圖案

值得一試的三個理由:

  1. 以台灣旅遊為發想,設計出一套專屬於台灣的免費圖示字型
  2. 提供 woff、woff2、svg 和 otf 四種常見格式下載
  3. 線上預覽並透過 css 樣式表在網頁載入特定圖案
Pseric

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6515