作者：杯面小王子 在對設計稿視覺還原的過程中，經常會產生一些字體還原的問題。

例如對一些大號文字還原后，實際視覺效果有遜于在photoshop上的效果；在Mac上的設計稿還原后，明明用的還是“宋體”和“黑體”，但是還原后字型相距較大；而在Windows做好的網頁在Mac上看起來字體也有點異樣。

這篇文章主要對字體作了一些探討，主要內容分為兩部分：

一、字體可用性分析
二、字體實際展示效果分析

結論

由于文章較長，結論先行：
1.?Mac?&?Windows公有可用英文及數字字體有：Arial,?Arial?Black,?Comic?Sans?MS,?Courier?New,?Georgia,?Impact?Times?New?Roman,?Trebuchet?MS,
Verdana
Windows下可用中文字體有（中易）宋體，新宋體，仿宋體，黑體，楷體，微軟雅黑（部分系統適用）。
Mac下可用中文字體有（華文）宋體，仿宋體，華文黑體，華文細黑，華文楷體。
在Mac下網頁的字體設置，參考了Apple官網的做法，可使用華文黑體，保持與Mac本身系統字體的一致性。
2.?對于微軟雅黑，以操作系統計算，覆蓋率僅為不到30%，未安裝該字體的用戶可使用宋體或黑體替代，有必要的話可考慮指定替代字體。
3.?在Mac中，未針對Mac做Mac字體設置的話，網頁字體會按一定規則轉成Mac下的字體。
4.?正文12px字體建議使用宋體。12-17px宋體比微軟雅黑要清晰。

一、字體可用性分析

A.?中文字體：

值得注意的是，mac下以及windows下沒有公用的中文字體（相關詳細對比后續討論）
具體預裝簡體中文字體列表如下：

【關于微軟雅黑的覆蓋率】
據統計，近期win7+vista的市場份額之和約在25%左右浮動，此部分用戶內置微軟雅黑，而對于沒有主動安裝微軟雅黑的XP-的用戶，在頁面中使用微軟雅黑時，文字將使用宋體替代。

B.?英文字體：

據統計（http://media.24ways.org/2007/17/fontmatrix.html），mac以及windows通用的公有字體有：

當頁面使用到活字的時候，可聯系設計師盡量使用以上中英文字體。使用這些字體可避免使用圖片，降低用戶加載時的帶寬成本，提升頁面的加載速度。

二、字體實際展示效果分析

A.?Photoshop設計效果?vs?Web實際展示效果

微軟提供了名為Cleartype的字體平滑技術，但是在XP下，cleartype是默認關閉的。所以在vista以及vista以上系統中，相比于XP，字體渲染更平滑。而Mac?Os?X中，字體渲染更為飽滿，邊緣更模糊，視覺上會顯得更“粗”一些。

總體來說：
“Mac?OS?X?的字體渲染強調忠實字體設計，最大化保留字體的外形。邊緣平滑是為了更好地傳遞字體設計中的曲線等細節，而在這種方針下，有可能引起小字號時的模糊。
而?Windows?的字體渲染強調文字的銳利和清晰。在操作系統介面和網頁正文等小字號的地方比較清晰，但大幅犧牲字體的原貌?！?br /> ——節選自http://www.zhihu.com/question/19573048

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

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

在Mac中，字體的差異性主要體現在中文上。

基于Mac的設計稿——Windows并不能重現Mac下的字體效果

一些設計師可能會使用Mac進行設計，但是會發現Mac設計出來的頁面在還原之后，字體的視覺差異較大，
這是因為Mac下的宋體以及Windows下的宋體，Mac下的黑體以及Windows下的黑體是不同的。
Windows系統下，其“宋體”=“中易宋體”，“黑體”=“中易黑體”
Mac系統下，其“宋體”=“華文宋體”，而“黑體”=“華文黑體”，而實際華文黑體的非加粗，加粗分別來自原有的“華文細黑”和“華文黑體”。

具體對比如下：

所以，在Mac下設計時，請注意Windows下字體效果與Mac下的字體效果是不同的，隨之，把設計還原成網頁后，字體效果自然會和設計稿有一定差距。

用Mac訪問針于Windows的網頁——Mac將使用自己的字體替代

在頁面還原中，可以手動設置網頁在Mac下使用某種Mac平臺下的字體，若不設置的話，將使用瀏覽器偏好設置中的默認字體，
Mac下的Safari默認使用華文宋體，Chrome默認使用華文黑體。如下圖所示：

在?Web?上的字體，如果設置了英文字體，將會影響到對應的中文默認字體。
如果默認字體是非襯線字體例如?Arial,?Verdana,?Trebuchet,?Impact，中文字體自動是選用非襯線字體華文黑體。（使用Impact的時候會加粗）
如果默認字體是襯線字體例如?Georgia,?Times?New?Roman，那么中文字體就會自動選成襯線字體華文宋體。

一般mac上會按這個規則選擇字體，但是經過測試，特殊的是，
Courier?New=>華文黑體
Comic?Sans?MS=>華文楷體

具體顯示邏輯如下：

對于不同的瀏覽器，在Mac中實際展示效果如下，

在實測我們可以發現，在Chrome下華文宋體并不能正常加粗。

C.?關于使用13px、15px、17px的宋體

Windows?自帶的點陣宋體（中易宋體）從?Vista?開始只提供?12、14、16?px?這三個大小的點陣，而?13、15、17?px?時用的是小一號的點陣（即每個字占的空間大了?1?px，但點陣沒變）?。

對于13、15、17px的宋體，其大小與其小一號一樣，只是間距多了1px。
所以在Photoshop中所使用的13、15、17px宋體并不能在web上正常還原，設計時應避免使用13、15、17px的宋體。

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

中文篇：

測試字號：12、13、14、16、18、24、30、36px
其中可看到，
1.?黑體字的鋸齒比較嚴重，
2.?在字號較小時，仿宋體以及楷體在不加粗的情況下效果較差。
3.?小字體中，宋體比微軟雅黑要清晰，
（因為宋體在12-17px的時候使用的是點陣表示，小于12px及大于17px之后將由字體輪廓柵格化。
即，12-17px顯示【點陣】，小于12px及大于17px顯示【輪廓】
而微軟雅黑只提供【輪廓】，在字體較小的時候會顯得不清晰，所以對于正文建議使用宋體。）

英文篇：

根據以上圖標可以看出不同字體在不同字號不同粗細下的展示效果。
如有需要請對比實際效果使用。

結語

在網頁構建中，字體可能是很容易被忽略的一個點。在設計的時候，很自然會認為在photoshop中選了某個字體，在web中選擇對應的字體，就會有對應的效果。
但是實際往往會產生一定的差異性，尤其是在跨平臺的情況下，差異性更加明顯。
這樣的現象會導致視覺還原的結果與預期不同。引起往返修改，甚至產生遠低于預期的情況。
所以為了更好地保證實際產品的視覺質量，字體也是一個不可忽略的切入點。———————————————————————————————————————————
參考資料：
http://www.zhihu.com/question/19573048?Mac?上的字體渲染和?Windows?的有什么區別
http://www.zhihu.com/question/20440679現在網頁設計中的為什么少有人用?11px、13px、15px?等奇數的字體
http://techsingular.net/?p=164?Mac?OS?X的字體
http://ucdchina.com/snap/12274?Mac Win網頁字體顯示方案
http://www.pjhome.net/article/Web/mac_os_fonts.htm關于MacOS下字體的一些研究
http://dancewithnet.com/2009/11/22/default-web-font-style/?默認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/

文章來源：騰訊ISUX

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量28萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：