提升觀感！如何把谷歌的「思源黑體」作為Webfont使用？

編者按：想讓你的網(wǎng)站瞬間提升質(zhì)感？試試谷歌和Adobe聯(lián)合推出的「思源黑體」！現(xiàn)在只要加入一段 Typekit 程序代碼，就可以把思源黑體作為網(wǎng)頁(yè)字體（Webfont）使用了，附上具體的使用教程，來(lái)收！

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

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

除了繁體中文，Typekit 亦有簡(jiǎn)體中文、日文及韓文共四種思源黑體網(wǎng)頁(yè)字型。

Adobe Typekit 雖然不是免費(fèi)服務(wù)，但也有免費(fèi)方案可以選擇，注冊(cè)后有每月 25,000 次的瀏覽次數(shù)額度，對(duì)于一般個(gè)人部落格或小型網(wǎng)站來(lái)說(shuō)其實(shí)還算充裕（當(dāng)然你也可以考慮付費(fèi)升級(jí)，價(jià)格不高）。

要如何讓你的網(wǎng)站文字更美觀、更有質(zhì)感呢？透過(guò)下方的教學(xué)，來(lái)申請(qǐng)取得 Typekit，并將思源黑體加入你的網(wǎng)站，取代原有默認(rèn)的字型吧！整體操作還算簡(jiǎn)單，不過(guò)前提是你的部落格提供商必須支持 JavaScript 語(yǔ)法，且要能自行修改 CSS 樣式表單。

Typekit

STEP 1

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

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

點(diǎn)選右上角的「Sign Up」按鈕來(lái)開始注冊(cè)吧！

STEP 2

進(jìn)入注冊(cè)頁(yè)面，可看到 Adobe Typekit 計(jì)價(jià)方式，其中有一個(gè)免費(fèi)（Free）方案，雖然可使用的字型數(shù)量較少，但仍有每月 25,000 瀏覽次數(shù)額度，點(diǎn)選「Sign Up」選擇方案。

STEP 3

接著輸入你的姓名、Email、密碼、國(guó)家和生日來(lái)注冊(cè)賬號(hào)，如果你已經(jīng)有 Adobe ID 的話也可直接登入開始使用。

STEP 4

注冊(cè)后登入 Adobe Typekit，回到 Source Han Sans Traditional Chinese 頁(yè)面，點(diǎn)選右上角綠色的「+ Use Fonts」按鈕。

跳出如下窗口后，先從上方的標(biāo)簽選擇「Web」，然后點(diǎn)選 Create a new kit 來(lái)建立一個(gè)新的網(wǎng)站設(shè)定。

STEP 5

跳出一個(gè) Create a Kit 新窗口后，設(shè)定一下要建立的網(wǎng)站名稱、網(wǎng)址，因?yàn)檫@段程序代碼會(huì)限制于你設(shè)定的域名上使用，網(wǎng)址部分一定要設(shè)定正確喔！

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

設(shè)定完后，就會(huì)產(chǎn)生 Install JavaScript 畫面，底下就是你要加入網(wǎng)頁(yè)的程序代碼。不過(guò)先別急著復(fù)制，點(diǎn)選「Continue」回到 Typekit 網(wǎng)頁(yè)來(lái)看看有沒有其他設(shè)定選項(xiàng)。

STEP 6

回到 Typekit 網(wǎng)頁(yè)，將鼠標(biāo)光標(biāo)移動(dòng)到右上角的「Kits」，會(huì)顯示你剛才設(shè)定好的網(wǎng)站名稱，點(diǎn)一下開啟設(shè)定，會(huì)出現(xiàn)如下畫面。

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

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

STEP 7

最后點(diǎn)選右下角的「Publish」來(lái)發(fā)布設(shè)定更新，Typekit 就會(huì)把 JavaScript 程序代碼顯示在網(wǎng)站上啰！使用者只需要復(fù)制這段程序代碼，然后把它放到網(wǎng)頁(yè) </body> 之前，就能在網(wǎng)頁(yè)內(nèi)加載思源黑體，讓整體閱讀效果更理想、更與眾不同。

至于要如何查看用量情形呢？可以從 Typekit 右上角的「Account」來(lái)看目前用量，免費(fèi)方案除了有每月 25,000 次的瀏覽次數(shù)限制外，可加入網(wǎng)站數(shù)量只有一個(gè)，能選用的網(wǎng)頁(yè)字型則有兩個(gè)。

如果用量超過(guò)會(huì)怎么樣呢？其實(shí)就只有網(wǎng)頁(yè)字型的樣式無(wú)法加載而已，完全不會(huì)影響網(wǎng)站的顯示或閱讀，倒也不用太過(guò)擔(dān)心。

值得一試的三個(gè)理由：

1. 思源黑體網(wǎng)頁(yè)字型（Webfont），已經(jīng)可以在 Typekit 取得使用
2. 支持繁體中文、簡(jiǎn)體中文、日文及韓文，提供七種可選用字重
3. 免費(fèi)方案每月可使用 25,000 次瀏覽配額

優(yōu)設(shè)國(guó)內(nèi)設(shè)計(jì)大牛專訪系列：

1. 《優(yōu)設(shè)訪談！騰訊設(shè)計(jì)師米田的設(shè)計(jì)之道與成長(zhǎng)之路》
2. 《優(yōu)設(shè)訪談！著名設(shè)計(jì)師馮鐵的設(shè)計(jì)思考與經(jīng)驗(yàn)之談》
3. 《優(yōu)設(shè)訪談！騰訊高級(jí)交互設(shè)計(jì)師C7210的十年設(shè)計(jì)路》

原文地址：free.com.tw

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量103萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com