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上建立了範例，大家可以用這個玩一玩測試一下。