最近某人吐槽某門戶網(wǎng)站在mac下chrome字體超丑，然后發(fā)現(xiàn)雖然現(xiàn)在mac用戶越來越多，但是大家依然無視mac下的字體差異，于是研究了下mac下網(wǎng)頁中的中文字體，和大家分享。

看了一遍國(guó)內(nèi)各大門戶和SNS網(wǎng)站，雖然可能大家的font-family設(shè)置都不太一樣，但是貌似現(xiàn)在只有QQ空間對(duì)mac下字體做了優(yōu)化。

ok，言歸正傳。

mac和windows自帶的字體非常不一樣，所以，針對(duì)windows的font-family設(shè)置一般不適用于mac系統(tǒng)，而在mac下，會(huì)調(diào)用系統(tǒng)默認(rèn)的細(xì)黑體(STXihei)，而這個(gè)字體渲染的其實(shí)并不是很好看。

優(yōu)化的方法有兩個(gè)：

方案一：使用Hiragino Sans GB字體

關(guān)于Hiragino Sans GB

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

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

比如QQ空間的字體設(shè)置為：

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

前面三個(gè)字體為英文字體。

使用前后對(duì)比:

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

webkit內(nèi)核私有屬性，用于字體抗鋸齒，使用后字體看起來會(huì)清晰舒服很多：

當(dāng)然這個(gè)只是webkit私有屬性，firefox和opera等瀏覽器不能使用——其實(shí)mac版firefox 的字體渲染比webkit要好看一點(diǎn)兒。

總結(jié)

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

我做了個(gè)測(cè)試頁面，分別用默認(rèn)字體設(shè)置加上-webkit-font-smoothing的各個(gè)屬性和Hiragino Sans GB使用同樣屬性設(shè)置，最終發(fā)現(xiàn)：

• webkit默認(rèn)使用-webkit-font-smoothing:subpixel-antialiased屬性，而不是none；
• Hiragino Sans GB字體和系統(tǒng)默認(rèn)的細(xì)黑體表現(xiàn)差異不是特別大，只是細(xì)節(jié)更圓潤(rùn)舒服；

圍觀測(cè)試頁面：http://labs./macfont.html，或直接看頁面截圖。

所以，如果你想偷懶，就只需要添加-webkit-font-smoothing:antialiased就可以了，最求最佳效果，就兩個(gè)都用上:P

如果你又更好的方案，歡迎提供。

參考：

• 關(guān)于MacOS下字體的一些研究
• 瀏覽器如何渲染文本【推薦閱讀】