2016年3月9日 星期三

思源黑體終於邁進Google Font啦!

之前曾經為了讓網頁能順利的用上漂亮的中文字型
爬了不少文章
後來參考百家之作法後自己組了一個還算堪用的字型定義順位如下:

font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "Microsoft YaHei", "メイリオ", Arial, "標楷體", DFKai-SB, sans-serif;

雖然不是什麼好方法,但也不無小補....
原本還想加上思源黑體的選擇
不過也想說他應該遲早會進入Google Font的服務範圍內吧?
就等吧~XD

終於......這一刻即將來臨~!!


以下轉載自免費資源網路社群
原文連結:https://free.com.tw/google-fonts-noto-sans-cjk-webfont/

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果

2016年3月8日 by Pseric
Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果
(Copyright: horsager / 123RF Stock Photo

思源黑體是 Adobe 和 Google 共同開發的開放原始碼字型,發佈時就已支援繁體中文、簡體中文、日文及韓文,因此深受許多使用者喜愛(尤其中文字型在製作難度上很高,除了付費項目外幾乎沒有更多選擇),其開源特性使更多字型同好得以就細部進行調整,重新設計出更不一樣的字型,例如:思源真黑體思源柔黑體等等。

一直以來,我都很期待 Google Fonts 將思源黑體的中文字型部分加入,讓網頁開發者可以直接於網頁上套用中文字型,而這項計劃近期也已經上線!如果你覺得網站中文字型太過單調,可考慮使用「思源黑體」取代預設字型。
若你還有印象,先前我曾經介紹過「為網站載入 Typekit 思源黑體中文網頁字型,提升文字顯示質感」,不過礙於 Typekit 定價策略,每月僅有 25,000 次的瀏覽次數額度,雖然對於一般的個人網誌或小型網站來說相當充裕,但如果需要更多配額就必須付費使用。

Google Fonts 本身不會對流量或次數額度有所限制,且無須註冊或下載檔案,只要依照服務提供的字型 CSS 程式碼,套入自己的網站後稍作調整即可使用,非常簡單!以下我會教你如何找到 Google Fonts 提供的思源黑體(除了繁體中文外,亦有簡體中文、日文和韓文等各種版本),當然你也需要有一個可以更新 CSS 或程式碼的網站、部落格才能使用。

網站名稱:Google Fonts: Early Access
網站鏈結:https://www.google.com/fonts/earlyaccess
使用教學
STEP 1
目前「思源黑體」中文網頁字型部分僅開放於 Google Fonts: Early Access 頁面,什麼是 Early Access 呢?簡單來說,你可以把它想像成是測試版,在 Early Access 的字型還沒有被正式加入到 Google Fonts 前,透過這項機制先收集使用者的意見回饋。

開啟 Google Fonts: Early Access 頁面,找到 Noto Sans TC(Chinese Traditional),就能看到網站提供的程式碼,使用方法很簡單,只要把 Google Fonts 提供的那段 CSS 程式碼放入網站的 <head>,修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果
從網站介紹可以得知,Noto Sans TC 涵蓋常用的 7,800 個繁體中文字元,以及 223 個額外字元來符合台灣的 CNS 11643 P1 和常用國字標準字體表。
STEP 2
若你擅於 CSS 的話,也可以把 Noto Sans TC 的 CSS 部分直接取出,置入自己網站或部落格原有的 CSS 檔,也有一樣的效果(同時減少檔案 request)。

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果
STEP 3

順帶一提,Google Fonts: Early Access 還有提供其他的中文網頁字型免費使用,不過比思源黑體還要早出現,包括 cwTeXFangSong(仿宋體)、cwTeXHei(黑體)、cwTeXMing(明體)、cwTeXYen(圓體)和cwTeXKai(楷體)五種,有興趣的朋友可以研究一下。

這五套字型是由 cwTex 排版系統而來,開發者為吳聰敏、吳聰慧、翁鴻翎。

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果

沒有留言:

張貼留言