偵測 Clear Type

Windows 上的網頁中文字型一直是很多設計師的痛苦來源,像我這種喜歡黑體字型的,就喜歡微軟正黑體大於新細明體很多,當然如果是蘋果電腦或是有很多 Linux 版本都已經內建字型渲染和預設的中文黑體字型(Linux 部分我比較不確定,有錯誤煩請指正),使用這些平台的看中文網頁比起 Windows 的使用者實在是愉悅很多,因為字型漂亮,網頁看起來就漂亮100倍,然後心情也跟著好起來。

雖然微軟從 Windows Vista 開始在系統上使用了新的預設字體「微軟正黑體」,不過網頁的使用上卻有不少的問題,也一再的被提出來討論,最近剛正式成立的 W3C 中文小組 內也才剛又被提出來 討論中 ,如果直接從 CSS 中強制設定微軟正黑體當網頁的中文字型,那會遇到一個比較直接的問題是,假如訪客的電腦是 Windows Vista 以前的版本,又剛好有裝微軟正黑體,但是沒開 Clear Type ,那結果是他會看到一個不太適合閱讀的字體,因為微軟正黑體如果沒有字型渲染的話,其實看起來不是很好,會覺得淡淡的顏色不夠深,辨識度還比新細明體差很多。

這樣其實蠻可惜的,因為很多人的系統其實是可以使用微軟正黑體來瀏覽網頁,但是卻因為需要像下相容,預設給了他們新細明體,要處理這個問題,最好的方法就是照漸進增強的原則,有支援字型渲染的給他微軟正黑體,沒支援的給他新細明體,IE 的話很簡單,看一下screen.fontSmoothingEnabled就好了,不過其他幾個瀏覽器可只能哭哭了。還好 canvas 發展到了可以在裡面畫字,而這部份的功能其他幾家瀏覽器都實作的比較快,於是 Zoltan 就想到用這個功能來判斷系統有沒有支援字體渲染,作法就是先用到處都有的字型畫個字進去,然後再看幾個關鍵點的顏色來判斷,如果有支援的話它就會在 html 標籤加上hasFontSmoothing-true這個 class,然後我就可以這樣寫 CSS:

html {
    font-family: sans-serif;
}
html.hasFontSmoothing-true {
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

Christian Beier 還有提供一個 修改 過的版本,讓事件綁定改用比較多人用的 jQuery,不然本來的要用 EventHelpers.js ,是個神祕(網站上找不到介紹)且知名度不高的 JS Event Library,而實際上這部份的修改很簡單,所以你也可以根據你的需要改用其他的方法來做一樣的事件綁定。