偵測 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，而實際上這部份的修改很簡單，所以你也可以根據你的需要改用其他的方法來做一樣的事件綁定。