2016年4月10日星期日

Google Webfont的思源黑體(Noto Sans TC)中文測試

上年年尾Google公佈Noto Sans字形時,一直都有留意住。
因為一直都並未有比較好看而免費的web font可以使用,相信大多數設計網頁的人還在使用"微軟正黑體"為主。
其實微軟正黑體並不差,由2000年的Windows XP時代走到2015,依然是很多人使用的預設繁體中文字體。
但在現今高解析度的螢幕下就顯得有不足。

當時Google的Webfont服務並未有同步包含這個字形,所以一直無緣使用在網頁上。
上幾個星期,得知Google Fonts的Early Access頁面已經可以使用Noto Sans CJK就立即在自己的Blog上測試一下。

前往Early Access頁面,搜索"Noto Sans TC"就可以找得到。
至於如何使用Webfont,大家就自行Google搜尋了。

測試一下Noto Sans TC使用效果 :

1. 在微軟正黑體 / 14px的字形下是這樣,大家應該都見慣這樣式。
font-family: 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;
font-size:14px;



2. 使用Noto Sans TC後,在單純14px的情況下,其實會更得更醜,
font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;
font-size:14px;



3. 主要原因是我未加font-weight去控制粗幼,Noto Sans TC的Font Weight預設是Regular 400,所以我加上font-weight: 300後,雖然字體幼了,但不會比微軟正黑體好看。
font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;
font-size:14px;
font-weight:300;



4. 來到這裡,我耍了一些手段,令字體更有圓滑,我加上text-shadow:#999 0.01em 0.01em 0.05em !important,是不是開始有感覺了。
font-family: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', Verdana, Arial, 'Microsoft YaHei' !important;
font-size:14px;
font-weight:300;
text-shadow:#999 0.01em 0.01em 0.05em !important



5.若果我把font-weight設回400,字體會更見結實。


所以我最後得出的結果是,視乎你使用情況而定,你可以微調font-size和font-weight得出最好的結果。
有關Noto Sans TC的font-weight可以參考官方文件 - https://www.google.com/get/noto/#sans-hant
如果你是完美主義者的話,可以再加上以下CSS做反鋸齒。
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;


值得一提的是Noto Sans TC在手機上有非常出色的效果,即使大量文字在最光的螢幕下看起來都十分舒服。


最後我在jsfiddle上建立了範例,大家可以用這個玩一玩測試一下。