先和大家分享兩個(gè)關(guān)于網(wǎng)頁(yè)的中文文字設(shè)計(jì)現(xiàn)象规肴。
現(xiàn)象1：
公司前端技術(shù)同事看到我上周寫的《好的字體讓你的網(wǎng)頁(yè)設(shè)計(jì)“傾國(guó)傾城”》后侯勉，主動(dòng)和我聊了排版網(wǎng)站文字的各種心得體會(huì)鹦筹，他提到的一個(gè)現(xiàn)象讓人很意外：除了設(shè)計(jì)師、前端技術(shù)址貌、策劃铐拐、排版印刷等職位的人員對(duì)文字有一定的敏感度外，實(shí)際上大多數(shù)用戶對(duì)文字的字體和字號(hào)沒(méi)什么概念练对。
他說(shuō)的沒(méi)概念是指余舶，雖然用戶對(duì)正在瀏覽的網(wǎng)頁(yè)有一個(gè)大致印象，可以說(shuō)說(shuō)自己對(duì)網(wǎng)站的直觀感受锹淌，比如網(wǎng)站好不好看匿值、風(fēng)格是否吸引人等。但他們并不是很在意這個(gè)網(wǎng)頁(yè)使用的是什么字體赂摆，甚至不知道造成視覺(jué)疲勞的罪魁禍?zhǔn)卓赡苷谟谝粋€(gè)字號(hào)的“小小”選擇挟憔。
現(xiàn)象2：
經(jīng)常聽到設(shè)計(jì)師們抱怨網(wǎng)頁(yè)設(shè)計(jì)中可供選擇的中文字體太少，創(chuàng)意字體即使設(shè)計(jì)出來(lái)也沒(méi)法實(shí)現(xiàn)烟号，或者實(shí)現(xiàn)成本太大绊谭，大大限制了他們創(chuàng)意的發(fā)揮。我們也看到很多設(shè)計(jì)教程都建議設(shè)計(jì)師們不要在中文字體上做太多創(chuàng)意汪拥。
這種現(xiàn)象也是上一篇文章中設(shè)計(jì)師的問(wèn)題：為什么國(guó)外網(wǎng)站字體做出來(lái)的效果那么好看达传，但我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)總覺(jué)得無(wú)法達(dá)到那種效果？
先從視覺(jué)角度說(shuō)明：我們能很明顯看出，英文是線條結(jié)構(gòu)宪赶，中文是方形結(jié)構(gòu)宗弯。從構(gòu)圖設(shè)計(jì)的角度看，英文字母比中文更具有幾何符號(hào)的感覺(jué)搂妻，圖形感會(huì)更豐富蒙保；從字形的角度看，英文采用的拉丁字母包括大小寫一共52個(gè)欲主，而且字形都比較簡(jiǎn)單邓厕，符號(hào)數(shù)量少便于識(shí)別，字形簡(jiǎn)潔便于設(shè)計(jì)扁瓢，而中文的筆畫很多過(guò)于密集详恼，不利于字體設(shè)計(jì)。
然后我們?cè)倭私庖韵率聦?shí)：
用戶的操作系統(tǒng)中自帶的字體有限引几，若使用創(chuàng)意字體昧互，打開網(wǎng)頁(yè)前還需要下載，通常英文字體只有幾百KB她紫，因?yàn)樗恍枰瑪?shù)字硅堆、標(biāo)點(diǎn)、英文字母即可贿讹。而中文字符文件龐大渐逃，動(dòng)輒數(shù)個(gè)MB，甚至十幾MB民褂，下載時(shí)間一般比較長(zhǎng)茄菊，往往導(dǎo)致網(wǎng)站打開速度慢，可能特殊字體還沒(méi)看到赊堪，用戶就已經(jīng)把網(wǎng)頁(yè)關(guān)閉了面殖。
從以上真實(shí)情況可以了解，其實(shí)我們不必糾結(jié)于網(wǎng)站的字體設(shè)計(jì)無(wú)法發(fā)揮創(chuàng)意哭廉，因?yàn)橛脩粼谝獾牟粌H僅是字體設(shè)計(jì)的創(chuàng)意脊僚，而是網(wǎng)站整體給人的感受，因此AnyForWeb認(rèn)為：設(shè)計(jì)師對(duì)文字的創(chuàng)意可以通過(guò)其他方向的發(fā)揮來(lái)讓用戶對(duì)你的網(wǎng)頁(yè)設(shè)計(jì)印象深刻遵绰。比如辽幌，保證網(wǎng)頁(yè)整體文字設(shè)計(jì)的規(guī)范性、增加修飾文字段落的創(chuàng)意椿访，以及對(duì)少量特殊字體的靈活應(yīng)用乌企。
一、如何保證網(wǎng)頁(yè)整體文字設(shè)計(jì)的規(guī)范性成玫？
>網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：字體選擇
在選擇字體上加酵，AnyForWeb建議設(shè)計(jì)師們盡量選擇系統(tǒng)默認(rèn)的或通用字體拳喻，保證瀏覽器能夠正確識(shí)別并顯示出正常的文字。
我們以宋體和微軟雅黑為例：
1.宋體
宋體是最常見(jiàn)的中文字體猪腕，在沒(méi)有指定字體的情況下冗澈，瀏覽器往往選擇它來(lái)渲染。但很多人認(rèn)為這種字體并不美觀码撰。
NoNoNo渗柿，并不是這樣个盆！舉個(gè)例子脖岛，在下面AnyForWeb網(wǎng)站的案例中，右側(cè)對(duì)客戶案例的描述文字正文內(nèi)容就是采用的宋體12px颊亮，配上18px的微軟雅黑標(biāo)題柴梆，層次清晰，讓人一目了然终惑，同時(shí)展現(xiàn)的美觀度絲毫不弱绍在。
2.微軟雅黑
微軟雅黑可以作為網(wǎng)站首選字體，它的美觀度和清晰度都較好雹有。
在優(yōu)度旅游網(wǎng)站中偿渡，網(wǎng)站首頁(yè)采用了Metro風(fēng)格，整站使用微軟雅黑字體霸奕，在不同板塊靈活應(yīng)用了不同的字號(hào)溜宽，文字層次很清晰。下圖中文字與卡片式設(shè)計(jì)風(fēng)格融合在一起质帅，讓整個(gè)網(wǎng)站顯得干凈大方适揉，富有親和力。
在這里煤惩，AnyForWeb有個(gè)小提示：微軟雅黑字體可以用font-family寫在頁(yè)面嫉嘀，但在網(wǎng)站圖片里面嵌入微軟雅黑的字體會(huì)構(gòu)成侵權(quán)，這一點(diǎn)是設(shè)計(jì)師們需要注意的魄揉。
我們?cè)賮?lái)說(shuō)說(shuō)宋體和微軟雅黑的一些區(qū)別剪侮。
宋體是襯線字體，微軟雅黑是無(wú)襯線字體洛退，宋體在視覺(jué)上更纖細(xì)瓣俯。和宋體相比，微軟雅黑的字形不是正方形的不狮，而是稍微的扁寬降铸，字間距很小，這樣會(huì)使默認(rèn)的行間距更明晰摇零，同時(shí)微軟雅黑的字心顯得更飽滿推掸。所以在同樣的字號(hào)下，雅黑的單字面積顯得更大，更容易識(shí)別谅畅。
標(biāo)題字體使用微軟雅黑更適合登渣，正文內(nèi)容可以根據(jù)設(shè)計(jì)風(fēng)格和需求靈活選擇。不過(guò)在手機(jī)端查看時(shí)毡泻，我們很明顯感覺(jué)到微軟雅黑字體更賞心悅目胜茧。
除宋體和微軟雅黑字體之外，設(shè)計(jì)師們還可以根據(jù)實(shí)際需要選擇其他經(jīng)典通用字體仇味，比如Windows自帶的中文字體黑體呻顽、仿宋、楷體等丹墨，以及英文字體Arial廊遍、Vardana等等。
>網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：字號(hào)選擇
CSS里面常用描述字體大小的單位主要是em和px贩挣。其中em在跨平臺(tái)設(shè)備字體處理上很有優(yōu)勢(shì)喉前，在常規(guī)網(wǎng)頁(yè)設(shè)計(jì)中，我們通常更多采用px作為單位王财。
這里以px為例卵迂，網(wǎng)頁(yè)設(shè)計(jì)中一般使用14px作為標(biāo)準(zhǔn)字體，16px作為中等字體绒净，18px作為較大字體见咒，12px作為偏小字體。當(dāng)然疯溺，我們這里說(shuō)的只是一種比較通用的標(biāo)準(zhǔn)论颅，實(shí)際上如何選擇字號(hào)需要設(shè)計(jì)師根據(jù)網(wǎng)頁(yè)整體設(shè)計(jì)布局來(lái)確定。
在頁(yè)面自適應(yīng)的設(shè)備上囱嫩，比如手機(jī)屏幕分辨率比PC端的低恃疯，這些因素也是設(shè)計(jì)師需要考慮的。
>網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：文字設(shè)計(jì)的規(guī)范性
大家應(yīng)該記得一點(diǎn)：雖然我們看到很多網(wǎng)站頁(yè)面的分享墨闲，但這些頁(yè)面都是屬于不同網(wǎng)站的今妄，而用戶關(guān)注的是一個(gè)網(wǎng)站的整體。所以對(duì)于設(shè)計(jì)師來(lái)說(shuō)鸳碧，他們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)應(yīng)該考慮所有頁(yè)面規(guī)范和一致性盾鳞。
初級(jí)設(shè)計(jì)師比較容易犯一些細(xì)節(jié)錯(cuò)誤，比如同一層級(jí)下的不同頁(yè)面出現(xiàn)字體不一樣瞻离，字號(hào)不統(tǒng)一腾仅，字間距不一致的情況等等。
如果想成為一個(gè)專業(yè)設(shè)計(jì)師套利，這些問(wèn)題都是需要通過(guò)規(guī)范設(shè)計(jì)來(lái)避免的推励。
二鹤耍、如果想讓文字部分看起來(lái)有創(chuàng)意，我們可以怎么做验辞？
>使用不同顏色的文字突出重點(diǎn)
>段落加上裝飾性設(shè)計(jì)元素
>重點(diǎn)文字內(nèi)容字體加粗
>文字與背景色形成高對(duì)比度
設(shè)計(jì)師還可以通過(guò)增加其他創(chuàng)意元素的方式來(lái)突出文字內(nèi)容稿黄，給設(shè)計(jì)增加亮點(diǎn)。
三跌造、如果一定要使用特殊字體……
在遇到需要使用特殊字體的情況時(shí)杆怕，很多設(shè)計(jì)師最常做的方法是把想要的文字做成圖片，但這種方式有幾個(gè)明顯的缺陷：不可能大范圍使用該字體壳贪，圖片內(nèi)容的文字不易修改陵珍，還很不利于網(wǎng)站的SEO。因此我們不建議這么做撑碴。
這并不意味著在文字上我們只能走常規(guī)路線撑教，AnyForWeb在網(wǎng)站中就使用了特殊字體朝墩，給網(wǎng)站增加特色和亮點(diǎn)醉拓。這里不是采用的圖片方式哦，大家可以試試對(duì)這些文字進(jìn)行復(fù)制收苏！
當(dāng)然亿卤，如何將特殊文字的設(shè)計(jì)還原到網(wǎng)頁(yè)，是前端工程師通過(guò)技術(shù)解決方案完成的鹿霸，有興趣的設(shè)計(jì)師也可以自己研究排吴。
通過(guò)技術(shù)，我們就可以靈活使用一些特殊字體讓網(wǎng)頁(yè)設(shè)計(jì)更有創(chuàng)意啦懦鼠。
本次關(guān)于網(wǎng)頁(yè)中文字設(shè)計(jì)的分享就到這里钻哩，下一篇文章將和大家分享文字的性格與應(yīng)用。
