justfont 更美了:正式支援 Directwrite

introtodirectwrite

不知道大家有沒有發現,10月份以來 justfont 所提供的字型,包含信黑體,在 Windows上顯示的效果大幅度提升,尤其在 Chrome 的顯示效果直逼 Mac,真讓人開心!

是的, Chrome 37以後的瀏覽器終於支援了Windows Directwrite 字體技術,讓 Windows 的字體顯示效果大幅進步。Directwrite 是微軟對 Windows 字體 rendering 問題的改良技術。當然除了瀏覽器支援外,字型本身也需要支援這格式才能顯示出相對的優化效果,我們特別調整了信黑體和其他字體的格式,以支援 Windows 的 Directwrite ,而這效果在 Firefox 與 Chrome 等目前主要瀏覽器都支援,的確大幅的改善 webfont 以往在 Windows 上顯示不佳的狀況。

字體的 rendering(目前比較通行的中文翻譯是「渲染」,但似乎還可以有更好的翻譯),是很複雜的技術,我們來看看在 Mac 螢幕上截的一張圖放大之後的結果。(我們用的電腦是 MacBook Air 2012 年版,瀏覽器是 Chrome 37.0.2062.94)。

introtodirectwrite2

電子螢幕其實是一格一格的像素(pixel)組成的。像素原則上是正方形的,但是正方形的像素組成的螢幕遇到「曲線」,要怎麼表現呢?難道不會有鋸齒嗎?在電子屏幕上的較佳解決方案其實就是利用子像素(sub-pixel)來進行,通常而言,子像素是由 RGB 三個顏色組合而成,可利用 RGB 的單獨或混合顯示,來優化字型的顯示效果。就如圖片那樣,有些像素中的一小部分以計算出的色差來補足鋸齒狀的缺角,讓字的曲線看起來是平滑的而非鋸齒的,這優化效果在小字顯示時尤其明顯。

introtodirectwrite3

以往的 Chrome 僅支援 GDI 的技術,在字體的 render 上常常出現這種怪怪的效果:有些筆畫斷掉、有些筆畫則是糊在一起,整篇文章的字幾乎都會碰到這個問題,這就是採用的 rasterization 不同所造成的差異。即使信黑體有針對螢幕做特別優化調整,但在 Windows 上遇到較差的 rander 機制,看起來效果仍會這樣。目前支援 Directwrite 字體技術後,我們在 Windows 電腦螢幕上實測的效果變成下面這樣,雖然還是沒有 Mac 來得理想,但是比起以前實在是大幅進步:

introtodirectwrite4

就連信黑體 W8 這樣的粗體字,在 Directwrite 之下,筆畫也不會糊成一團了:

introtodirectwrite5

目前看來主要的效果優化主要採用 Sub-pixel anti-aliasing,在中文字的筆畫粗細和白空間配置上更為合理(小字顯示時,白空間比著墨部分重要),小字時即使複雜筆畫,也較之前可清晰辨識,讓中文 webfont 瀏覽的品質提升許多。

也想幫自己的網站字體升級成美麗的雲端字型嗎?先免費試用 justfont 如何?

發表您的想法

comments

  • Dominic Wu

    我以為渲染是Shader的動詞…?

    • G.J.Robert Ciang

      「渲染」對應 render 的翻法,似乎來自中國/大陸。

    • Dominic Wu

      應該是,但是我看中國討論字的shader / rendering / hinting之類的時候,都有人用「渲染」這個字(囧

  • Jingqi Xie

    表示 JFBlog 当前字体在 100% 缩放的时候效果并不好看,但是缩放到 125% 时显示效果还不错。