於網頁套用 Google Fonts 英文字型

在網頁設計上,如果你需要美麗的英文字型, Google Fonts 所提供的免費字型庫是個很好的選擇,它採開放授權,可以自由且任意使用,包含個人或商業用途,甚至對其進行修改。Google Fonts 的使用相當簡單,網址如下:

Google Fonts - http://www.google.com/fonts

進入網頁之後,每一個字型均以方塊標示,找到合意的字型,如下圖,以其中的 Joti One 為例,點選其中的 Quick-use 按鈕(箭頭指向處):



切換至字型的使用說明頁之後往下拉,找到配置所需的程式碼,除了標準 CSS 用法,另外還提供了 @import 與 JavaScript 語法。



以CSS為例,根據其說明將<link> 配置於網頁中,然後指定 CSS 字型,如此一來即能以此字型呈現文字。

The quick brown fox jumps over the lazy dog

補上官方使用說明連結:https://developers.google.com/fonts/docs/getting_started
還有專屬官方 Blog :Google Fonts Blog Making the web beautiful




沒有留言: