網頁設計工具 - Google Fonts介紹及應用
本篇適合網頁設計初心者或是對網頁設計字型有興趣的任何人
以往網頁設計的過程中,字型的選擇不多,導致設計師使用了特定字體,但是網頁輸出後卻沒辦法在瀏覽器上呈現。
結果就變成想使用那個字體,整個網站都做成圖片檔,這會導致整個網站跑得很慢,還不利於SEO!因為瀏覽器抓取關鍵字是抓文字,都變成圖片,怎麼有辦法抓取得到呢?
字體開源的出現,解決了廣大網頁設計師的困擾。而今天要介紹的,就是最廣為大家使用的「Google Fonts」。
Google Fonts主要以英文字型為大宗。,因為開發中文字遠比英文難上許多。
你想想,英文只有26個字母,但是中文的常用就至少3000~5000左右呢!
值得一提的是Google跟Adobe於2015年共同發表了「Noto Sans TC 思源黑體」beta版,支援的範圍包括:繁體中文、日文以及韓文。可想而知,這對漢語為主的國家而言可是一大福音呢!
當然,除了中文字型的支援之外,Google Fonts還有三大值得推薦的原因:
2. 搜尋篩選功能,更快速找到自己需要的字型組合
3. 可下載字型檔案(.ttf)或嵌入網頁用
我們要怎麼從Google Fonts上使用字型呢?
步驟1:選擇要載入的字型
可利用右側選單做條件篩選,如:樣式、來源、語系...等等。
步驟2:選擇樣式並進行調整
可進行字體粗細、CSS的樣式設定,還能直接看到設定後的預覽效果,也可以下載在電腦觀看。
步驟3:將字型引用到HTML裡
結論
目前「Noto Sans TC 思源黑體」已於2018年底終於從beta版畢業,正式上架至Google Fonts。有興趣的人都可以在Google Fonts上,找到這款中文字型,並將它嵌入網頁中使用囉~是不是很方便呢?