2016年9月29日

[技術分享] 如何引用 google 雲端字體到網頁設計中


在設計網頁的過程中,我們可能常常苦於能夠使用的字型太少,或者只有少數人電腦有安裝那個字型,使得你所使用的字型在別人的螢幕上是無法呈現的,而 Google Fonts 便可以幫助我們解決這樣的問題。



Google Fonts 中,Google 截至目前提供了 808 個免費字體,其中雖然大部分仍為英文,但在網頁設計的字型選擇上,仍然對設計師有非常大的幫助和選擇上的彈性。

STEP 1

使用方法非常簡單,首先到 Google Fonts 的網站(https://fonts.google.com/),接著從中挑選你喜歡的字體。


STEP 2

接著選擇你喜歡的字體,在右上角的 + 號點一下。


STEP 3

點選下方的導覽列,將會彈出你剛剛選擇過的字體。


STEP 4

取得和字體有關的 CSS 設定檔


STEP 5

只需要把上述步驟中所得到的 CSS 設定檔和字型名稱套用到你的網頁中,就可以成功引用字型了。在這裡我們以 CodePen 為例,示範如何在 Codepen 裡面引用 Google 雲端字體。

首先,在 Settings 當中設定 CSS 的部分,匯入剛剛取得的 CSS 連結。


STEP 6

接著套用剛剛所取得的字型名稱,頁面上即會呈現出你所選擇的字體,而且不會因為電腦有無安裝這個字體都可正常顯示




等等...那中文呢?


你可能會問說...上面好像都是英文字體,有沒有中文的呢?

在這裡 Google 也有釋出免費的雲端中文字體,雖然選擇仍不是非常多,但除了非常普遍被應用的「思源黑體」,還包括「仿宋體」、黑體、楷體、明體等等,但這必須要到 Early Access Google Fonts (https://fonts.google.com/earlyaccess)才找得到喔!

以思源黑體為例,只要在這個網站上按 Ctrl+F 搜尋 「Noto Sans TC」,就可以取得這個字體的 CSS 設定檔連結和字型名稱了。

透過同樣的方法,把連結匯入網站中,選擇使用的字型,你就可以使用 Google 所提供的中文字體了!


0 意見:

張貼留言