Mac Ｗin 網(wǎng)頁字體顯示方案

Mac在誕生的時候就把對字體處理盡可能接近原貌成為它很大的一個賣點，而在這些年親身使用后，個人感覺Mac下的字體確實看起來比Win下舒服些，特別是在瀏覽網(wǎng)頁時，字體比較“珠圓玉潤”，可惜的是Mac目前并不是主流，大多數(shù)還是Win用戶。所以即使你所使用是Mac，在設(shè)計仍然要記得平衡Win下的效果。

Mac和Win的顯示區(qū)別

截了段文字做了個對比,很容易看得出來，字體顯示起來是有很大的差別的。

Mac下文字是渲染過，比較飽滿，Win下更像素化些，看起來很清晰。具體什么因素造成了這個差別，已經(jīng)有不少的討論了。

Joel Spolsky「Font smoothing, anti-aliasing, and sub-pixel rendering」總結(jié)了各自的區(qū)別。

• 蘋果認為，字體渲染算法的目標應(yīng)盡可能還原字體的設(shè)計，即使代價是造成些許模糊。
• 微軟認為，字符的形狀應(yīng)和像素契合，以防止模糊，提高可讀性，即便扭曲了字體的構(gòu)造。

Typekkit 「Type rendering: operating systems 」也總結(jié)了一段

• Mac OS X users see Core Text, Windows 7 and Windows Vista users see either DirectWrite or GDI, and Windows XP users see GDI. For now,

還有更多，我就不摘過來了，大家可自行搜索。

默認字體&CSS字體設(shè)置

字體的差異不僅是渲染的效果，其實Mac和Win的默認字體也是不一樣的，Mac是“華文黑體(Heiti SC Light 和 Heiti SC Medium)”，Win是“宋體(Simsun)”，所以在頁面沒設(shè)置默認字體的情況下，同個頁面在2個系統(tǒng)同時展示的中文字體也是不一樣。（字體效果可以見剛才的2個系統(tǒng)字體對比圖）。

有種特殊的情況，即使命名了默認中文字體Mac也會使用系統(tǒng)默認字體，不知這算不算是一個Bug，情況如下：

• font-family:”宋體” Mac下無法認出宋體，Win可以認出
• font-family:”simsun” Mac和Win都可以認出宋體

在使用中文命名時，還可能會遇上CSS編碼導(dǎo)致發(fā)生亂碼的問題：

綜合發(fā)生的情況，建議在設(shè)置字體時都使用英文描述，這些是從網(wǎng)上找了相關(guān)中英文字體的命名：

• 宋體: SimSun
• 黑體: SimHei
• 華文細黑: STHeiti Light [STXihei]
• 華文黑體: STHeiti
• 微軟雅黑: Microsoft YaHei
• 微軟正黑體: Microsoft JhengHei
• 新宋體: NSimSun
• 新細明體: PMingLiU
• 仿宋: FangSong
• 楷體: KaiTi
• 更多中文字體的英文名稱的文檔

暫定的解決方案

在設(shè)計時候如何能夠平衡Mac和Win的設(shè)計差別? Win下面可以在PS中使用“宋體無渲染”完全還原默認系統(tǒng)的文字效果，但Mac下可能系統(tǒng)的文字渲染和PS中的文字渲染算法不一樣，總是有點差別，沒辦法完全的還原。

所以在考慮到網(wǎng)站的用戶是以Win為主，PS中又能夠完全的還原Win下文字的顯示效果，同時之前的一段中發(fā)現(xiàn)在Win下面有不錯效果在Mac下也會有不錯的表現(xiàn)之后，有了一個暫定的方案：

• 統(tǒng)一使用“宋體無渲染”為默認文字，先保證在Win系統(tǒng)下的顯示效果
• 在CSS中不訂下默認字體，根據(jù)系統(tǒng)格式調(diào)整
• 在網(wǎng)頁上線后在Mac下再進行一次復(fù)查，保證Mac下的顯示效果

目前這個是能考慮到的暫定的方案，看到這篇文章的設(shè)計師們有沒有更好的解決方案？

【延伸閱讀】

針對Mac單獨優(yōu)化字體 mac下網(wǎng)頁中文字體優(yōu)化
Mac下字體研究 關(guān)于MacOS下字體的一些研究

icojump原文：http://icojump.in/?p=2200
推薦關(guān)注產(chǎn)品設(shè)計微博:@ICOjump