mac下網頁中文字體優化

最近某人吐槽某門戶網站在mac下chrome字體超醜，而後發現雖然如今mac用戶愈來愈多，可是你們依然無視mac下的字體差別，因而研究了下mac下網頁中的中文字體，和你們分享。

看了一遍國內各大門戶和SNS網站，雖然可能你們的font-family設置都不太同樣，可是貌似如今只有QQ空間對mac下字體作了優化。

ok，言歸正傳。

mac和windows自帶的字體很是不同，因此，針對windows的font-family設置通常不適用於mac系統，而在mac下，會調用系統默認的細黑體(STXihei)，而這個字體渲染的其實並非很好看。

優化的方法有兩個：

方案一：使用Hiragino Sans GB字體

關於Hiragino Sans GB

Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic（ヒラギノ角ゴ）的簡體中文字體 [1]，近乎完美地繼承了原型的風格，有很微妙的喇叭口，弧線柔美、內斂，字面寬大程度合理。這是一款清新的專業印刷字體，小字號時足夠清晰，大字號時又不會「細節欠奉」(via http://www.zhihu.com/question/19732722)

目前它是mac系統下自帶的比較好看的黑體字體之一，比較適合網頁渲染，也廣受歡迎。

好比QQ空間的字體設置爲：

.os_mac { font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3"; } 

前面三個字體爲英文字體。

使用先後對比:

方案二：使用-webkit-font-smoothing:antialiased

webkit內核私有屬性，用於字體抗鋸齒，使用後字體看起來會清晰舒服不少：

固然這個只是webkit私有屬性，firefox和opera等瀏覽器不能使用——其實mac版firefox 的字體渲染比webkit要好看一點兒。

總結

那麼，到底那種方案好一些呢？

我作了個測試頁面，分別用默認字體設置加上-webkit-font-smoothing的各個屬性和Hiragino Sans GB使用一樣屬性設置，最終發現：

• webkit默認使用-webkit-font-smoothing:subpixel-antialiased屬性，而不是none；
• Hiragino Sans GB字體和系統默認的細黑體表現差別不是特別大，只是細節更圓潤舒服；

圍觀測試頁面：http://labs.qianduan.net/macfont.html，或直接看頁面截圖。

因此，若是你想偷懶，就只須要添加-webkit-font-smoothing:antialiased就能夠了，最求最佳效果，就兩個都用上:P

若是你又更好的方案，歡迎提供。