如何保證網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范性?

　　網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：字體選擇

　　在選擇字體上，AnyForWeb建議設(shè)計(jì)師們盡量選擇系統(tǒng)默認(rèn)的或通用字體，保證瀏覽器能夠正確識(shí)別并顯示出正常的文字。

　　我們以宋體和微軟雅黑為例：

　　1、宋體

　　宋體是最常見的中文字體，在沒有指定字體的情況下，瀏覽器往往選擇它來渲染。但很多人認(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)站顯得干凈大方，富有親和力。

　　這里有個(gè)小提示：微軟雅黑字體可以用font-family寫在頁(yè)面，但在網(wǎng)站圖片里面嵌入微軟雅黑的字體會(huì)構(gòu)成侵權(quán)，這一點(diǎn)是設(shè)計(jì)師們需要注意的。

　　我們?cè)賮碚f說宋體和微軟雅黑的一些區(qū)別。

　　宋體是襯線字體，微軟雅黑是無襯線字體，宋體在視覺上更纖細(xì)。和宋體相比，微軟雅黑的字形不是正方形的，而是稍微的扁寬，字間距很小，這樣會(huì)使默認(rèn)的行間距更明晰，同時(shí)微軟雅黑的字心顯得更飽滿。所以在同樣的字號(hào)下，雅黑的單字面積顯得更大，更容易識(shí)別。

　　標(biāo)題字體使用微軟雅黑更適合，正文內(nèi)容可以根據(jù)設(shè)計(jì)風(fēng)格和需求靈活選擇。不過在手機(jī)端查看時(shí)，我們很明顯感覺到微軟雅黑字體更賞心悅目。

　　除宋體和微軟雅黑字體之外，設(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)然，我們這里說的只是一種比較通用的標(biāo)準(zhǔn)，實(shí)際上如何選擇字號(hào)需要設(shè)計(jì)師根據(jù)網(wǎng)頁(yè)整體設(shè)計(jì)布局來確定。

　　在頁(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ì)師來說，他們?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ì)師，這些問題都是需要通過規(guī)范設(shè)計(jì)來避免的。