source-han-sans-webfont-1

編者按:想讓你的網站瞬間提升質感?試試谷歌和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 也就是繁體中文。

12adobe20151105

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

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

11adobe20151105

STEP 2

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

10adobe20151105

STEP 3

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

9adobe20151105

STEP 4

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

8adobe20151105

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

7adobe20151105

STEP 5

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

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

6adobe20151105

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

5adobe20151105

STEP 6

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

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

4adobe20151105

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

3adobe20151105

STEP 7

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

2adobe20151105

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

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

1adobe20151105

值得一試的三個理由:

  1. 思源黑體網頁字型(Webfont),已經可以在 Typekit 取得使用
  2. 支持繁體中文、簡體中文、日文及韓文,提供七種可選用字重
  3. 免費方案每月可使用 25,000 次瀏覽配額

優設國內設計大牛專訪系列:

  1. 《優設訪談!騰訊設計師米田的設計之道與成長之路》
  2. 《優設訪談!著名設計師馮鐵的設計思考與經驗之談》
  3. 《優設訪談!騰訊高級交互設計師C7210的十年設計路》

原文地址:free.com.tw

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量103萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 3

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏