跨平臺(tái)字體效果淺析

在對(duì)設(shè)計(jì)稿視覺(jué)還原的過(guò)程中，經(jīng)常會(huì)產(chǎn)生一些字體還原的問(wèn)題。

例如對(duì)一些大號(hào)文字還原后，實(shí)際視覺(jué)效果有遜于在photoshop上的效果;在Mac上的設(shè)計(jì)稿還原后，明明用的還是“宋體”和“黑體”，但是還原后字型相距較大;而在Windows做好的網(wǎng)頁(yè)在Mac上看起來(lái)字體也有點(diǎn)異樣。

這篇文章主要對(duì)字體作了一些探討，主要內(nèi)容分為兩部分：

　　一、字體可用性分析

　　二、字體實(shí)際展示效果分析

　　結(jié)論

　　由于文章較長(zhǎng)，結(jié)論先行：

　　1. Mac & Windows公有可用英文及數(shù)字字體有：Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact Times New Roman, Trebuchet MS,

　　Verdana

　　Windows下可用中文字體有(中易)宋體，新宋體，仿宋體，黑體，楷體，微軟雅黑(部分系統(tǒng)適用)。

　　Mac下可用中文字體有(華文)宋體，仿宋體，華文黑體，華文細(xì)黑，華文楷體。

　　在Mac下網(wǎng)頁(yè)的字體設(shè)置，參考了Apple官網(wǎng)的做法，可使用華文黑體，保持與Mac本身系統(tǒng)字體的一致性。

　　2. 對(duì)于微軟雅黑，以操作系統(tǒng)計(jì)算，覆蓋率僅為不到30%，未安裝該字體的用戶可使用宋體或黑體替代，有必要的話可考慮指定替代字體。

　　3. 在Mac中，未針對(duì)Mac做Mac字體設(shè)置的話，網(wǎng)頁(yè)字體會(huì)按一定規(guī)則轉(zhuǎn)成Mac下的字體。

　　4. 正文12px字體建議使用宋體。12-17px宋體比微軟雅黑要清晰。

　　一、字體可用性分析

　　A. 中文字體：

　　值得注意的是，mac下以及windows下沒(méi)有公用的中文字體(相關(guān)詳細(xì)對(duì)比后續(xù)討論)

　　具體預(yù)裝簡(jiǎn)體中文字體列表如下：

　　【關(guān)于微軟雅黑的覆蓋率】

　　據(jù)統(tǒng)計(jì)，近期win7+vista的市場(chǎng)份額之和約在25%左右浮動(dòng)，此部分用戶內(nèi)置微軟雅黑，而對(duì)于沒(méi)有主動(dòng)安裝微軟雅黑的XP-的用戶，在頁(yè)面中使用微軟雅黑時(shí)，文字將使用宋體替代。

　　B. 英文字體：

　　據(jù)統(tǒng)計(jì)(http://media.24ways.org/2007/17/fontmatrix.html)，mac以及windows通用的公有字體有：

　　當(dāng)頁(yè)面使用到活字的時(shí)候，可聯(lián)系設(shè)計(jì)師盡量使用以上中英文字體。使用這些字體可避免使用圖片，降低用戶加載時(shí)的帶寬成本，提升頁(yè)面的加載速度。

　　二、字體實(shí)際展示效果分析

　　A. Photoshop設(shè)計(jì)效果 vs Web實(shí)際展示效果

　　微軟提供了名為Cleartype的字體平滑技術(shù)，但是在XP下，cleartype是默認(rèn)關(guān)閉的。所以在vista以及vista以上系統(tǒng)中，相比于XP，字體渲染更平滑。而Mac Os X中，字體渲染更為飽滿，邊緣更模糊，視覺(jué)上會(huì)顯得更"粗"一些。

　　總體來(lái)說(shuō)：

　　"Mac OS X 的字體渲染強(qiáng)調(diào)忠實(shí)字體設(shè)計(jì)，最大化保留字體的外形。邊緣平滑是為了更好地傳遞字體設(shè)計(jì)中的曲線等細(xì)節(jié)，而在這種方針下，有可能引起小字號(hào)時(shí)的模糊。

　　而 Windows 的字體渲染強(qiáng)調(diào)文字的銳利和清晰。在操作系統(tǒng)介面和網(wǎng)頁(yè)正文等小字號(hào)的地方比較清晰，但大幅犧牲字體的原貌。"

　　——節(jié)選自http://www.zhihu.com/question/19573048

　　如希望獲得更多關(guān)于字體渲染的信息，可閱覽http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/

　　B. 在Mac中，字體的差異性

　　在Mac中，字體的差異性主要體現(xiàn)在中文上。

　　基于Mac的設(shè)計(jì)稿——Windows并不能重現(xiàn)Mac下的字體效果

　　一些設(shè)計(jì)師可能會(huì)使用Mac進(jìn)行設(shè)計(jì)，但是會(huì)發(fā)現(xiàn)Mac設(shè)計(jì)出來(lái)的頁(yè)面在還原之后，字體的視覺(jué)差異較大，

　　這是因?yàn)镸ac下的宋體以及Windows下的宋體，Mac下的黑體以及Windows下的黑體是不同的。

　　Windows系統(tǒng)下，其"宋體"="中易宋體"，"黑體"="中易黑體"

　　Mac系統(tǒng)下，其"宋體"="華文宋體"，而"黑體"="華文黑體"，而實(shí)際華文黑體的非加粗，加粗分別來(lái)自原有的"華文細(xì)黑"和"華文黑體"。

　　具體對(duì)比如下：

　　所以，在Mac下設(shè)計(jì)時(shí)，請(qǐng)注意Windows下字體效果與Mac下的字體效果是不同的，隨之，把設(shè)計(jì)還原成網(wǎng)頁(yè)后，字體效果自然會(huì)和設(shè)計(jì)稿有一定差距。

　　用Mac訪問(wèn)針于Windows的網(wǎng)頁(yè)——Mac將使用自己的字體替代

　　在頁(yè)面還原中，可以手動(dòng)設(shè)置網(wǎng)頁(yè)在Mac下使用某種Mac平臺(tái)下的字體，若不設(shè)置的話，將使用瀏覽器偏好設(shè)置中的默認(rèn)字體，

　　Mac下的Safari默認(rèn)使用華文宋體，Chrome默認(rèn)使用華文黑體。如下圖所示：

　　在 Web 上的字體，如果設(shè)置了英文字體，將會(huì)影響到對(duì)應(yīng)的中文默認(rèn)字體。

　　如果默認(rèn)字體是非襯線字體例如 Arial, Verdana, Trebuchet, Impact，中文字體自動(dòng)是選用非襯線字體華文黑體。(使用Impact的時(shí)候會(huì)加粗)

　　如果默認(rèn)字體是襯線字體例如 Georgia, Times New Roman，那么中文字體就會(huì)自動(dòng)選成襯線字體華文宋體。

　　一般mac上會(huì)按這個(gè)規(guī)則選擇字體，但是經(jīng)過(guò)測(cè)試，特殊的是，

　　Courier New=>華文黑體

　　Comic Sans MS=>華文楷體

　　具體顯示邏輯如下：

　　對(duì)于不同的瀏覽器，在Mac中實(shí)際展示效果如下，

　　在實(shí)測(cè)我們可以發(fā)現(xiàn)，在Chrome下華文宋體并不能正常加粗。

　　C. 關(guān)于使用13px、15px、17px的宋體

　　Windows 自帶的點(diǎn)陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個(gè)大小的點(diǎn)陣，而 13、15、17 px 時(shí)用的是小一號(hào)的點(diǎn)陣(即每個(gè)字占的空間大了 1 px，但點(diǎn)陣沒(méi)變) 。

　　對(duì)于13、15、17px的宋體，其大小與其小一號(hào)一樣，只是間距多了1px。

　　所以在Photoshop中所使用的13、15、17px宋體并不能在web上正常還原，設(shè)計(jì)時(shí)應(yīng)避免使用13、15、17px的宋體。

　　D. 具體字體展示效果一覽

　　中文篇：

　　測(cè)試字號(hào)：12、13、14、16、18、24、30、36px其中可看到，

　　1. 黑體字的鋸齒比較嚴(yán)重，

　　2. 在字號(hào)較小時(shí)，仿宋體以及楷體在不加粗的情況下效果較差。

　　3. 小字體中，宋體比微軟雅黑要清晰，

　　(因?yàn)樗误w在12-17px的時(shí)候使用的是點(diǎn)陣表示，小于12px及大于17px之后將由字體輪廓柵格化。

　　即，12-17px顯示【點(diǎn)陣】，小于12px及大于17px顯示【輪廓】

　　而微軟雅黑只提供【輪廓】，在字體較小的時(shí)候會(huì)顯得不清晰，所以對(duì)于正文建議使用宋體。)

　　英文篇：

　　根據(jù)以上圖標(biāo)可以看出不同字體在不同字號(hào)不同粗細(xì)下的展示效果。

　　如有需要請(qǐng)對(duì)比實(shí)際效果使用。

　　結(jié)語(yǔ)

　　在網(wǎng)頁(yè)構(gòu)建中，字體可能是很容易被忽略的一個(gè)點(diǎn)。在設(shè)計(jì)的時(shí)候，很自然會(huì)認(rèn)為在photoshop中選了某個(gè)字體，在web中選擇對(duì)應(yīng)的字體，就會(huì)有對(duì)應(yīng)的效果。

　　但是實(shí)際往往會(huì)產(chǎn)生一定的差異性，尤其是在跨平臺(tái)的情況下，差異性更加明顯。

　　這樣的現(xiàn)象會(huì)導(dǎo)致視覺(jué)還原的結(jié)果與預(yù)期不同。引起往返修改，甚至產(chǎn)生遠(yuǎn)低于預(yù)期的情況。

　　所以為了更好地保證實(shí)際產(chǎn)品的視覺(jué)質(zhì)量，字體也是一個(gè)不可忽略的切入點(diǎn)。

　　參考資料：

　　http://www.zhihu.com/question/19573048  Mac 上的字體渲染和 Windows 的有什么區(qū)別

　　http://www.zhihu.com/question/20440679 現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中的為什么少有人用 11px、13px、15px 等奇數(shù)的字體

　　http://techsingular.net/?p=164  Mac OS X的字體

　　http://ucdchina.com/snap/12274  Mac Win網(wǎng)頁(yè)字體顯示方案

　　http://www.pjhome.net/article/Web/mac_os_fonts.htm 關(guān)于MacOS下字體的一些研究

　　http://dancewithnet.com/2009/11/22/default-web-font-style/  默認(rèn)Web字體樣式

　　http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/