如何把谷歌的「思源黑體」作為WEBFONT使用？

 　　想讓你的網站瞬間提升質感?試試谷歌和Adobe聯合推出的「思源黑體」!現在只要加入一段 Typekit 程序代碼，就可以把思源黑體作為網頁字體(Webfont)使用了，附上具體的使用教程，來收!

　　相信大家對「思源黑體(Source Han Sans)」都不陌生，這是 Adobe 和 Google 合作，於 2014 年推出的開放原始碼免費字型，提供七種粗細設定，完整支持日文、韓文、繁體及簡體中文，有鑒於免費中文字型選擇不多，在開發上也頗具難度，一推出便受到許多人關注，修改版字型也陸續出現，例如之前介紹過的思源柔黑體、思源真黑體。

　　若想將思源黑體做為網頁字型(Webfont)使用，你可能會遇到瓶頸，或許是某些問題尚待解決，Google Fonts 遲遲沒有把 Source Han Sans 網頁字體放上去。最近在翻找資料時發現 Adobe Typekit 已經先行提供「思源黑體」Webfont 了!這也表示網頁開發者可以在網站內自由加載這美麗的字型，只要加入一段 Typekit 程序代碼。

　　除了繁體中文，Typekit 亦有簡體中文、日文及韓文共四種思源黑體網頁字型。

　　Adobe Typekit 雖然不是免費服務，但也有免費方案可以選擇，注冊後有每月 25,000 次的浏覽次數額度，對於一般個人部落格或小型網站來說其實還算充裕(當然你也可以考慮付費升級，價格不高)。

　　要如何讓你的網站文字更美觀、更有質感呢?透過下方的教學，來申請取得 Typekit，並將思源黑體加入你的網站，取代原有默認的字型吧!整體操作還算簡單，不過前提是你的部落格提供商必須支持 JavaScript 語法，且要能自行修改 CSS 樣式表單。

　　Typekit

　　STEP 1

　　開啟 Typekit 網站後，點選右上角的「Browse Fonts」，從 Limited Library 可以找到思源黑體系列，我們要使用的為 Source Han Sans Traditional Chinese 也就是繁體中文。

　　從「Source Han Sans Traditional Chinese」可以預覽思源黑體在網頁上的顯示效果，一共七種字重，分別為 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy，最初網站上只提供字型下載，現在也加入了對於 Web(網頁字型)的支持。

　　點選右上角的「Sign Up」按鈕來開始注冊吧!

　　STEP 2

　　進入注冊頁面，可看到 Adobe Typekit 計價方式，其中有一個免費(Free)方案，雖然可使用的字型數量較少，但仍有每月 25,000 浏覽次數額度，點選「Sign Up」選擇方案。

　　STEP 3

　　接著輸入你的姓名、Email、密碼、國家和生日來注冊賬號，如果你已經有 Adobe ID 的話也可直接登入開始使用。

　　STEP 4

　　注冊後登入 Adobe Typekit，回到 Source Han Sans Traditional Chinese 頁面，點選右上角綠色的「+ Use Fonts」按鈕。

　　跳出如下窗口後，先從上方的標簽選擇「Web」，然後點選 Create a new kit 來建立一個新的網站設定。

　　STEP 5

　　跳出一個 Create a Kit 新窗口後，設定一下要建立的網站名稱、網址，因為這段程序代碼會限制於你設定的域名上使用，網址部分一定要設定正確喔!

　　范例可參照以下灰色文字，無須填入 http:// ，只要輸入你的域名部分即可。

　　設定完後，就會產生 Install JavaScript 畫面，底下就是你要加入網頁的程序代碼。不過先別急著復制，點選「Continue」回到 Typekit 網頁來看看有沒有其他設定選項。

　　STEP 6

　　回到 Typekit 網頁，將鼠標光標移動到右上角的「Kits」，會顯示你剛才設定好的網站名稱，點一下開啟設定，會出現如下畫面。

　　從這裡可以設定要使用、加載的思源黑體字型字重，默認只會有 Regular 和 Bold ，為了避免讓字型加載速度變慢，建議維持默認值，除非你有特殊的需求。

　　點選左上角的「Using fonts in CSS」可以看到詳細的 CSS 設定方法，假如你要在標題部分使用思源黑體的話，只要加入一段 font-family 設定值，這部分就不多做說明。

　　STEP 7

　　最後點選右下角的「Publish」來發布設定更新，Typekit 就會把 JavaScript 程序代碼顯示在網站上啰!使用者只需要復制這段程序代碼，然後把它放到網頁</body> 之前，就能在網頁內加載思源黑體，讓整體閱讀效果更理想、更與眾不同。

　　至於要如何查看用量情形呢?可以從 Typekit 右上角的「Account」來看目前用量，免費方案除了有每月 25,000 次的浏覽次數限制外，可加入網站數量只有一個，能選用的網頁字型則有兩個。

　　如果用量超過會怎麼樣呢?其實就只有網頁字型的樣式無法加載而已，完全不會影響網站的顯示或閱讀，倒也不用太過擔心。

　　值得一試的三個理由：

　　思源黑體網頁字型(Webfont)，已經可以在 Typekit 取得使用

　　支持繁體中文、簡體中文、日文及韓文，提供七種可選用字重

　　免費方案每月可使用 25,000 次浏覽配額