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

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

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

Vista系統出現后，Vista和Windows7默認微軟雅黑字體，當用戶逐漸接受這種美觀大方的字體后，設計師也開始在網頁設計中大量使用微軟雅黑。

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

整站只用一種字體

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

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

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

兩款中文字體混合使用

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

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

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

我們再來看看漢路律師事務所設計開發的網站。律師這個行業，傳統、專業、公正、官方、權威?具備這種特征的字體非宋體莫屬。

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

超實用的文本處理技巧

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

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

方法一：

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

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

方法二：

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

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

方法三：

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

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

方法四：

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

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

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

方法五：

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

接下來繼續完善。

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

方法六：

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

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

文章標題：網頁設計對字體設計和布局
分享地址：http://www.js-pz168.com/news13/163913.html

成都網站建設公司_創新互聯，為您提供軟件開發、App設計、品牌網站設計、微信公眾號、微信小程序、網站收錄

廣告

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