2013年5月21日 星期二

網頁設計字體應用: Google Web Fonts

每一個網頁設計師,常常希望自己的網頁可以呈現不同字體,不要只有新細明或微軟正黑體。企劃也會常常希望有不同字體,但設計常常和你說沒辦法喔~

但現在已經有資源可以讓我們使用了喔~
美中不足的是,目前 Google Web Fonts 只有英文字型,沒有中文字型

網站名稱:Google Web Fonts
網站性質:免費 | 字型

快速使用介紹

就直接到 Google Web Fonts ,進來之後,你可以先把字體預覽文字改成你想要的:
12
接著,我們可以開始從右方的字體搜尋來挑自己喜歡的字型。可以直接輸入名稱,或用 Fliters 來選取字型相關資訊,如粗細、樣式等等。我把字型粗細調成比較細的樣式,然後在右方就會出現符合條件的字型。
1
找到自己喜歡的字型之後,可以按「Quick-use」(快速使用)或「Add to Collection」(加到列表),如果你點 Add to Collection 則可以繼續選你想要的字型再一併打包使用。在這邊我們就直接點「Quick-use」啦,我覺得一個漂亮的字型就很夠用了。
2
Google Web Fonts 也很貼心的讓你可以選擇字體的粗細,有好幾種的厚度可以選(不像一般的中文只有粗和細的差別),如果在網頁中要用到就打個勾。另外,在右方也很貼心的有載入時間的提示。
3
接著,你就可以把生成的 Code 弄到自己的網頁中了!Sean是習慣選 @import,可以寫在 CSS 裏頭比較方便。之後下方還有使用方法,告訴你應該在 font-family 該加什麼名稱才能顯示。
4
注意!像 Sean在上面選了 Light 200 和 Normal 400,如果我要使用 Light 200 的字型,就得將 font-weight 改成 200 ;反之要用 Normal 400 就要將 font-weight 改成 400,才會顯示正常的長寬。
現在,如果你也是網頁設計者就也來使用這個這麼好的服務吧!