經(jīng)常瀏覽各種網(wǎng)站的人知道，中文文字網(wǎng)站上目前使用的字體基本分為兩類：宋體、微軟雅黑。還有很少量的網(wǎng)站會(huì)使用黑體文字或其他特殊字體。

Windows7普及之前，中文網(wǎng)站上字體幾乎是清一色的宋體。除了中文字符文件大的局限，還有下面幾個(gè)原因：

>  閱讀習(xí)慣：中國(guó)人長(zhǎng)期閱讀紙質(zhì)書(shū)本和雜志，大量宋體文字培養(yǎng)了一種固定的閱讀習(xí)慣。

>  操作系統(tǒng)默認(rèn)：Windows操作系統(tǒng)本身自帶字體有限，如果沒(méi)有指定字體，操作系統(tǒng)默認(rèn)使用宋體渲染。

>  不同操作系統(tǒng)、不同版本的兼容性：近幾年國(guó)內(nèi)Mac使用人群在增長(zhǎng)，不同系統(tǒng)、不同版本預(yù)裝的字體幾乎沒(méi)有交集。即使是有限的常用字體，比如宋體、仿宋、楷體，在Windows和OS X展示也有一些視覺(jué)差異，而為了盡可能減少這些差異，大家一般會(huì)選擇“安全字體”，比如宋體、黑體。

Vista系統(tǒng)出現(xiàn)后，Vista和Windows7默認(rèn)微軟雅黑字體，當(dāng)用戶逐漸接受這種美觀大方的字體后，設(shè)計(jì)師也開(kāi)始在網(wǎng)頁(yè)設(shè)計(jì)中大量使用微軟雅黑。

在專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)里，除了Banner圖、廣告語(yǔ)等特殊情況可能會(huì)用到特殊字體，網(wǎng)頁(yè)中使用的字體以不超過(guò)2種為準(zhǔn)，并且最好采用標(biāo)準(zhǔn)字體，比如中文的宋體、微軟雅黑，英文的Arial、Verdana。

只有使用這些系統(tǒng)自帶的字體，才能讓前端開(kāi)發(fā)人員在排版時(shí)高程度地還原設(shè)計(jì)稿的文字效果。

說(shuō)到這里，設(shè)計(jì)師們可能覺(jué)得字體選擇性少，不過(guò)先別急著哭！本文以國(guó)內(nèi)優(yōu)秀中文網(wǎng)站字體應(yīng)用及我們的實(shí)踐經(jīng)驗(yàn)為案例，分享如何只用宋體和微軟雅黑這兩款中文字體，同樣設(shè)計(jì)出高大上的網(wǎng)頁(yè)。

一、整站只用1種中文字體

悅讀FM是一個(gè)匯集閱讀、播音、音樂(lè)、攝影愛(ài)好者分享交流的平臺(tái)，主要面對(duì)的人群是年輕人。這個(gè)網(wǎng)站上所有頁(yè)面的文字，包括Logo的文字、導(dǎo)航、按鈕、文章標(biāo)題、正文等，都采用了微軟雅黑字體，它們的區(qū)別只是在不同欄目和不同層級(jí)采用了不同字號(hào)。

在上一篇介紹文字性格的文章中，我們?cè)枋鲞^(guò)微軟雅黑給人的感受包括平和、干凈、簡(jiǎn)單、平靜、專業(yè)等。

在悅讀FM網(wǎng)站中，我們能看出這個(gè)網(wǎng)站整體設(shè)計(jì)風(fēng)格就是干凈簡(jiǎn)單，不論是網(wǎng)頁(yè)布局還是圖片搭配，都看起來(lái)清晰明了。這個(gè)平臺(tái)定位是“傾聽(tīng)文字的聲音”，用戶在這個(gè)網(wǎng)站上的行為主要是聽(tīng)，文字則傾向于一種輔助作用。

用戶在聽(tīng)的時(shí)候，可以時(shí)不時(shí)看看文字內(nèi)容，微軟雅黑這款字體很好地向用戶展現(xiàn)出一種干凈感，很符合網(wǎng)站想要傳遞的安靜、清新的意境。

知乎網(wǎng)是一個(gè)網(wǎng)絡(luò)問(wèn)答社區(qū)，整個(gè)網(wǎng)站構(gòu)成以文字為主，社區(qū)內(nèi)的問(wèn)答通常通過(guò)大篇幅的文字進(jìn)行互動(dòng)。
這個(gè)網(wǎng)站整站采用了宋體，文字標(biāo)題與字號(hào)和正文有明顯的區(qū)別，這些設(shè)計(jì)突出了標(biāo)題，也促進(jìn)網(wǎng)站整體設(shè)計(jì)滿足最高質(zhì)、最深度、最有收獲的閱讀體驗(yàn)。

對(duì)字體的感受不那么強(qiáng)烈？那咱們?cè)囋嚢丫W(wǎng)站字體換成微軟雅黑：

一眼看上去，換過(guò)字體后的網(wǎng)頁(yè)好像沒(méi)有什么大變化，似乎讓網(wǎng)站還有了一種科技感。
但假如像下圖這樣呢？

大段的微軟雅黑字體排列略顯厚重，如果是在網(wǎng)頁(yè)上長(zhǎng)時(shí)間瀏覽，會(huì)讓人的眼睛產(chǎn)生不適。相比而言，襯線字體裝飾性強(qiáng)，具有易讀性，所以宋體更適合知乎網(wǎng)站這種大段文字網(wǎng)站，它們看起來(lái)更舒適，并且宋體文字還能讓用戶注意力集中在文字內(nèi)容上，更專注于信息而不是字體本身。

AnyForWeb為杜卡迪設(shè)計(jì)開(kāi)發(fā)的公司網(wǎng)站中，除了圖片中的特殊字體，整站中文字體采用了微軟雅黑。

與悅讀FM網(wǎng)站的清新風(fēng)格不同，我們能明顯感受到這個(gè)網(wǎng)站傳達(dá)另一種感覺(jué)：現(xiàn)代化、速度與激情、酷炫，同時(shí)還有一種力量感。

我們?cè)僭囋嚢丫W(wǎng)站字體換成宋體：

呃，怎么看都覺(jué)得哪里不對(duì)！
宋體在這里看起來(lái)太輕了，完全不能表達(dá)文字闡述的“釋放”“動(dòng)力”“速度”的感覺(jué)。而微軟雅黑雖然不像某些特殊字體那樣傳達(dá)強(qiáng)烈的速度感，但如果要選擇網(wǎng)頁(yè)中文字體，干脆利落的微軟雅黑是一個(gè)很好的選擇。

二、2款中文字體靈活搭配

如果你覺(jué)得只用一款中文字體太單調(diào)，還可以靈活搭配兩款字體，提升用戶的閱讀體驗(yàn)。我們以優(yōu)秀案例說(shuō)明：

簡(jiǎn)書(shū)是一個(gè)讓用戶專注寫作和閱讀的平臺(tái)，它為用戶提供了兩款字體選擇模式：宋體、黑體。

頭部的篩選標(biāo)簽文字在兩種模式下都是微軟雅黑字體，用小字號(hào)仍然確保了顯示的清晰度。

在黑體模式下，整站就只采用微軟雅黑字體，文章詳情頁(yè)的標(biāo)題以加粗突出展現(xiàn)。這時(shí)候我們感受到的就是簡(jiǎn)潔干凈。

為了避免長(zhǎng)篇文字帶來(lái)的厚重感，簡(jiǎn)書(shū)采取自動(dòng)分段功能，并且正文有固定的字號(hào)和行間距，這種排版布局讓寫作者和閱讀者都感到舒適。

在宋體模式下，首頁(yè)文章標(biāo)題是加粗宋體，作者名稱和文章發(fā)布時(shí)間的小字也是宋體，下面的閱讀和評(píng)論部分使用了微軟雅黑。

文章詳情頁(yè)的標(biāo)題使用了楷體，正文內(nèi)容則是宋體。這種模式下瀏覽網(wǎng)頁(yè)，我們可以感受到一種文藝和優(yōu)雅。

如果只使用宋體，這個(gè)頁(yè)面可能會(huì)略顯普通，所以不要小看了這一處楷體的應(yīng)用，這款俊雅字體的應(yīng)用讓整個(gè)頁(yè)面散發(fā)出一種書(shū)卷氣息，可謂是點(diǎn)睛之筆。

而且大家不要忘了，楷體也是系統(tǒng)預(yù)裝的字體之一，設(shè)計(jì)時(shí)不用顧慮排版問(wèn)題。

另一個(gè)案例是AnyForWeb為漢路律師事務(wù)所設(shè)計(jì)開(kāi)發(fā)的網(wǎng)站。

在看到圖之前，我們先想一下：律師行業(yè)網(wǎng)站應(yīng)該給人什么感覺(jué)？

傳統(tǒng)、專業(yè)、公正、官方、權(quán)威？沒(méi)錯(cuò)！而具備這種特征的字體非宋體莫屬。我們來(lái)看網(wǎng)站展示：

在這個(gè)網(wǎng)站中，Logo本身已經(jīng)傳達(dá)了傳統(tǒng)文化的感覺(jué)，如果文字全部采用宋體肯定會(huì)讓網(wǎng)站顯得呆板不生動(dòng)。所以設(shè)計(jì)師在導(dǎo)航欄應(yīng)用了黑體，標(biāo)題部分則使用了微軟雅黑加粗，這樣搭配起來(lái)，既展現(xiàn)出專業(yè)的特征，又讓網(wǎng)站顯示出一種小小的獨(dú)特。

經(jīng)驗(yàn)提煉：
根據(jù)網(wǎng)站定位、整體設(shè)計(jì)風(fēng)格以及文字性格選擇字體。
可以通過(guò)加粗、增加字號(hào)、文字顏色突出標(biāo)題。

從這些案例中我們就能知道，在分析了網(wǎng)站定位、用戶人群，確定了設(shè)計(jì)風(fēng)格后，只用常規(guī)的幾款字體，我們一樣可以設(shè)計(jì)出高客戶滿意度的作品。