Dev 2Share

Adobe 和 Google 共同推出了一組適用於日文、中文、韓文、拉丁文、希臘文和西里爾字母的開源字體「思源黑體」(Noto), 有興趣者可以前往免費下載。其中中文的部份提供了一個稱為 Noto Sans 的無飾邊字型 (San Serif)。很可惜地, 並沒有同時提供飾邊字型 (Serif)。這組字型內含總共七個 .otf 黑體字型, 從最細 (Thin) 到最粗 (Black), 涵括了從內文到粗標的所有應用領域, 實在是佛心來著。

但是, 對於 Windows 使用者而言, 這組字型真的有必要嗎? Windows 裡面已經附帶了一個微軟正黑體, 這難道不夠嗎? 其實, 微軟正黑體是一種通用型的字型, 其來源是美國 Monotype 公司, 也是自 Windows Vista 之後才終於放進 Windows 的無飾邊中文字型。請別小看這個字型, 它是經過特殊設計的, 這使得它在小字時也能看得清楚, 尤其對筆劃多的字效果特別明顯。問題在於, 由於這種字型的「通用性」太強, 這使得這個單一字型必須應付多種情況: 在小字型時看起來像細黑體, 在大字型並加粗時看起來卻像中黑體。從好的方向看, 它既能當作內文, 又能當作標題; 但如果從壞的方向看, 它卻是個四不像了。

如果讀者們對於字型比較重視一點, 那麼思源黑體可能會是個更適合的選擇。如果你想看看這七個字型如何在不同的字型大小中呈現, 以及它們跟微軟正黑體的比較, 請參考以下這個 jsFiddle (你必須已經先安裝了 Noto 字型, 才能看到效果):

從這個示範程式中大家應該可以看出, 在 12px 小字型中, 微軟正黑體的確顯得十分清楚, 所以它絕對有資格比思源黑體更適合當作內文的字體 (雖然理論上微軟新細明體這種飾邊字型是最適合當作內文字體的)。但是一旦我們把字體放大, 大家就看得出來思源黑體的優點就慢慢浮現了。尤其來到 40px 以上, 思源黑體並沒有忽粗忽細的問題, 也比較漂亮。

程式裡有個無法克服的問題, 那就是 CSS 的 font-weight 屬性雖然允許 100 ~ 900 這幾個數字, 但是對這些字體而言, 字體粗細只在 600 (IE) 或 700 (Chrome) 及以上才能看出變化。所以如果在網頁中使用這些字型 (包括微軟正黑體), 大家應該可以不必花心思去微調那些數字了; 使用 normal 和 bold 就足夠了。

當然, 就本質而言, 在你的網頁中套用 Noto 字型是沒有太大意義的。如果使用者端沒有安裝本字型的話, 他很可能只會看到新細明體, 除非你設定微軟正黑體當作替代字型, 但是那樣做的意義也不是很大。上面範例使用網頁呈現, 純粹只是為了為了方便看到字體變化的效果罷了; 我並沒有鼓勵你在你的網頁中套用該字型。把這種字型應用在美工或排版上面或許是更為適合的。

參考:

1. 華康掰掰！Adobe與Google聯合推出免費字體下載
   (順帶說一下, 我覺得這標題下得誇張了; 這跟華康有何關係?)
2. Google Noto Fonts

 

---

Dev 2Share @ 點部落