我們?cè)诮?jīng)常瀏覽各種網(wǎng)站的時(shí)候會(huì)發(fā)現(xiàn)，我們所接觸到的中文網(wǎng)站上目前使用的字體基本分為兩類：宋體、微軟雅黑。當(dāng)然還有很少量的網(wǎng)站會(huì)使用黑體文字或其他特殊字體。這類網(wǎng)站大多具有鮮明的個(gè)性或是為了做局部的突出效果，這里暫不做討論。

我們知道在Windows普及之前，中文網(wǎng)站上字體幾乎清一色的實(shí)用宋體。除了中文字符文件大的局限，還有下面幾個(gè)原因：

• 中國(guó)人長(zhǎng)期閱讀紙質(zhì)書本和雜志，大量宋體文字培養(yǎng)了一種固定的閱讀習(xí)慣。
• Windows操作系統(tǒng)本身自帶字體有限，如果沒有指定字體，操作系統(tǒng)默認(rèn)使用宋體渲染。
• 近幾年國(guó)內(nèi)Mac使用人群在增長(zhǎng)，不同系統(tǒng)、不同版本預(yù)裝的字體幾乎沒有交集。即使是有限的常用字體，比如宋體、仿宋、楷體，在Windows和OS X展示也有一些視覺差異，而為了盡可能減少這些差異，大家一般會(huì)選擇“安全字體”，比如宋體、黑體。

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

在專業(yè)的網(wǎng)頁設(shè)計(jì)里，除了Banner圖、廣告語等特殊情況可能會(huì)用到特殊字體，網(wǎng)頁中使用的字體以不超過2種為準(zhǔn)，并且最好采用標(biāo)準(zhǔn)字體，比如中文的宋體、微軟雅黑，英文的Arial、Verdana。只有使用這些系統(tǒng)自帶的字體，才能讓前端開發(fā)人員在排版時(shí)高程度地還原設(shè)計(jì)稿的文字效果。說到這里，網(wǎng)頁設(shè)計(jì)師們可能覺得字體選擇性少，不過先別著急，我們以國(guó)內(nèi)優(yōu)秀中文網(wǎng)站字體應(yīng)用及我們的實(shí)踐經(jīng)驗(yàn)為案例，分享如何只用宋體和微軟雅黑這兩款中文字體，同樣設(shè)計(jì)出高大上的網(wǎng)頁。

整站只用一種字體

悅讀FM是一個(gè)匯集閱讀、播音、音樂、攝影愛好者分享交流的平臺(tái)，主要面對(duì)的人群是年輕人。這個(gè)網(wǎng)站上所有頁面的文字，包括Logo的文字、導(dǎo)航、按鈕、文章標(biāo)題、正文等，都采用了微軟雅黑字體，它們的區(qū)別只是在不同欄目和不同層級(jí)采用了不同字號(hào)。在悅讀FM網(wǎng)站中，我們能看出這個(gè)網(wǎng)站整體設(shè)計(jì)風(fēng)格就是干凈簡(jiǎn)單，不論是網(wǎng)頁布局還是圖片搭配，都看起來清晰明了。這個(gè)平臺(tái)定位是“傾聽文字的聲音”，用戶在這個(gè)網(wǎng)站上的行為主要是聽，文字則傾向于一種輔助作用。用戶在聽的時(shí)候，可以時(shí)不時(shí)看看文字內(nèi)容，微軟雅黑這款字體很好地向用戶展現(xiàn)出一種干凈感，很符合網(wǎng)站想要傳遞的安靜、清新的意境。

知乎是大家比較熟悉的一個(gè)網(wǎng)絡(luò)問答社區(qū)，整個(gè)網(wǎng)站構(gòu)成以文字為主，社區(qū)內(nèi)的問答通常通過大篇幅的文字進(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)。如果我們?cè)囋嚢丫W(wǎng)站字體換成微軟雅黑，一眼看上去，換過字體后的網(wǎng)頁好像沒有什么大變化，但假如像下圖這樣呢?

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

兩款中文字體混合使用

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

簡(jiǎn)書是一個(gè)讓用戶專注寫作和閱讀的平臺(tái)，它為用戶提供了兩款字體選擇模式：宋體、黑體。頭部的篩選標(biāo)簽文字在兩種模式下都是微軟雅黑字體，用小字號(hào)仍然確保了顯示的清晰度。

在黑體模式下，整站就只采用微軟雅黑字體，文章詳情頁的標(biāo)題以加粗突出展現(xiàn)。這時(shí)候我們感受到的就是簡(jiǎn)潔干凈。為了避免長(zhǎng)篇文字帶來的厚重感，簡(jiǎn)書采取自動(dòng)分段功能，并且正文有固定的字號(hào)和行間距，這種排版布局讓寫作者和閱讀者都感到舒適。

我們?cè)賮砜纯礉h路律師事務(wù)所設(shè)計(jì)開發(fā)的網(wǎng)站。律師這個(gè)行業(yè)，傳統(tǒng)、專業(yè)、公正、官方、權(quán)威?具備這種特征的字體非宋體莫屬。

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

超實(shí)用的文本處理技巧

超實(shí)用的文本處理技巧當(dāng)下社會(huì)的快餐文化，直接的使得我們的各種習(xí)慣隨之改變，人們?cè)絹碓讲辉笇r(shí)間花在長(zhǎng)時(shí)間閱讀上，我們永遠(yuǎn)不要做逆勢(shì)而為之的事情，用戶習(xí)慣讀圖，那么一定是讀圖比讀字更符合他們自身的使用習(xí)慣，我們要做的，不是強(qiáng)行沒收對(duì)方讀圖的權(quán)利，更不是將過多的精力花費(fèi)在如何將文字從眾多圖片中脫穎而出。而是考慮如何使圖片準(zhǔn)確的傳達(dá)出我們希望表達(dá)的意思。

以下根據(jù)本文中提供一些方法。經(jīng)過如下方式處理的文字，會(huì)比普通文字更易被重視。

方法一：

最吸引人的，排在第一位的，永遠(yuǎn)是顏色，通過放大字號(hào)，其實(shí)就是放大了整體文本的色塊面積，來與較弱色彩進(jìn)行區(qū)分，來達(dá)到吸引眼球的目的。但只通過簡(jiǎn)單的字體放大，會(huì)給人造成內(nèi)容粗糙的弊端。因此建議放大后的文本，選擇帶有襯線的字體，來彌補(bǔ)文字形式上的粗糙感?？蓞⒁娤聢D。

通過復(fù)雜字體的筆畫，一來可以解決視覺上內(nèi)容粗糙的問題;二來，由于較為復(fù)雜的筆畫，其實(shí)又無形中增加了顏色的面積。

方法二：

通過調(diào)整字體的顏色，從而使原本單調(diào)的單色，變成醒目的多色文本。但如果色彩搭配雜亂無章，除了增加閱讀難度外，也會(huì)給閱讀者造成文字內(nèi)容粗糙的感覺。因此，建議參考下圖。

通過顏色的有序漸變和將文字內(nèi)容進(jìn)行刻意的色彩區(qū)分，這樣兩種方式可以擺脫原有雜亂色彩帶來的廉價(jià)感。另外將原有雜亂的點(diǎn)狀色彩，變?yōu)槊娣e更大的面狀色彩，無形中同樣加大了色彩的可視比例，從而起到吸引視覺的目的。

方法三：

將文字反白處理，將色彩面積增大。也可使用下圖方式。

在以上的舉例中，其實(shí)是在反復(fù)論證色彩的重要性，通過最簡(jiǎn)單的方式增加色彩的面積，從而起到專注視覺的目的。但是需要注意的是，并不是顏色越多越亮就越好，錯(cuò)誤的色彩搭配有時(shí)候會(huì)適得其反的使文字信息變得失去閱讀者的信任。下面繼續(xù)舉例。

方法四：

在同等色彩與字體字號(hào)的情況下，人最容易注意到的，就是文本中的數(shù)字與英文，因?yàn)樵谌说拈喿x習(xí)慣中，數(shù)字與英文是作為圖形去理解。因此通過閱讀文本的內(nèi)容，我們可以將文本中的某些信息，通過符號(hào)化的方式去表達(dá)，從而吸引人的注意力。

但是如果遇到了文本中的信息實(shí)在不好找到符號(hào)化處理怎么辦呢?那么可以參考下面的處理方式。

看到了嗎?其實(shí)我們可以通過人為增加符號(hào)的方式，使得整段文字更加吸引人!另外，其實(shí)標(biāo)點(diǎn)符號(hào)我們也是作為符號(hào)來理解的哦!同理采用這樣編輯方式的還可以在文字中間加入一些較萌的QQ表情，效果也會(huì)差不多!

方法五：

事實(shí)證明，人們除了在吃藥的時(shí)候會(huì)刻意的閱讀說明書外，其余的時(shí)候是不會(huì)閱讀長(zhǎng)篇大論的文字，因此當(dāng)文本信息過多時(shí)，需要充分的考慮閱讀者的習(xí)慣，我們能做的，是通過工整的版式，讓閱讀者在閱讀前就充分的知道這段文字閱讀起來很容易，而不會(huì)出現(xiàn)串行等情況。只有他愿意讀，他才會(huì)讀下去。

接下來繼續(xù)完善。

看到了沒，雖然從整體上增加了文本的尺寸，但是從斷句和行距上，更加切合閱讀者的閱讀習(xí)慣。這就好比讓一個(gè)人一次步行10公里，和分5次來步行10公里的區(qū)別。而且放大了的文本，更加的增加了色彩的面積。

方法六：

再給大家一個(gè)最簡(jiǎn)單，但是卻是最有效的方式。

沒錯(cuò)，那就是調(diào)換文字與圖片之間的位置，事實(shí)證明，文字?jǐn)[放在圖片下方，會(huì)比放在圖片上更加讓人愿意閱讀。其實(shí)以上的舉例，只是在證明我始終在做一件事，那就是盡量將文字圖片化的處理，讓文字給人的第一感覺更像是顏色或符號(hào)，從而消除觀看者閱讀前的心理障礙。

文章下載，點(diǎn)擊：網(wǎng)頁設(shè)計(jì)對(duì)字體設(shè)計(jì)和布局