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

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

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

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

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

整站只用一種字體

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

知乎是大家比較熟悉的一個網(wǎng)絡(luò)問答社區(qū)，整個網(wǎng)站構(gòu)成以文字為主，社區(qū)內(nèi)的問答通常通過大篇幅的文字進行互動。這個網(wǎng)站整站采用了宋體，文字標題與字號和正文有明顯的區(qū)別，這些設(shè)計突出了標題，也促進網(wǎng)站整體設(shè)計滿足高質(zhì)、最深度、最有收獲的閱讀體驗。如果我們試試把網(wǎng)站字體換成微軟雅黑，一眼看上去，換過字體后的網(wǎng)頁好像沒有什么大變化，但假如像下圖這樣呢?

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

兩款中文字體混合使用

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

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

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

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

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

超實用的文本處理技巧

超實用的文本處理技巧當下社會的快餐文化，直接的使得我們的各種習慣隨之改變，人們越來越不愿將時間花在長時間閱讀上，我們永遠不要做逆勢而為之的事情，用戶習慣讀圖，那么一定是讀圖比讀字更符合他們自身的使用習慣，我們要做的，不是強行沒收對方讀圖的權(quán)利，更不是將過多的精力花費在如何將文字從眾多圖片中脫穎而出。而是考慮如何使圖片準確的傳達出我們希望表達的意思。

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

方法一：

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

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

方法二：

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

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

方法三：

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

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

方法四：

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

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

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

方法五：

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

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

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

方法六：

再給大家一個最簡單，但是卻是最有效的方式。

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

文章標題：網(wǎng)頁設(shè)計對字體設(shè)計和布局
分享地址：http://www.rwnh.cn/news13/163913.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、App設(shè)計、品牌網(wǎng)站設(shè)計、微信公眾號、微信小程序、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)