模板建站動態

在專業的網頁設計裡，除瞭Banner圖、廣告語等特殊情況可能會用到特殊字體，網頁中使用的字體以不超過2種為準，並且最好采用標準字體。

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

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

> 閱讀習慣：中國人長期閱讀紙質書本和雜志，大量宋體文字培養瞭一種固定的閱讀習慣。

> 操作系統默認：Windows操作系統本身自帶字體有限，如果沒有指定字體，操作系統默認使用宋體渲染。

> 不同操作系統、不同版本的兼容性：近幾年國內Mac使用人群在增長，不同系統、不同版本預裝的字體幾乎沒有交集。即使是有限的常用字體，比如宋體、仿宋、楷體，在Windows和OS X展示也有一些視覺差異，而為瞭盡可能減少這些差異，大傢一般會選擇“安全字體”，比如宋體、黑體。

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

在專業的網頁設計裡，除瞭Banner圖、廣告語等特殊情況可能會用到特殊字體，網頁中使用的字體以不超過2種為準，並且最好采用標準字體，比如中文的宋體、微軟雅黑，英文的Arial、Verdana。

隻有使用這些系統自帶的字體，才能讓前端開發人員在排版時高程度地還原設計稿的文字效果。

說到這裡，設計師們可能覺得字體選擇性少，不過先別急著哭!本文以國內優秀中文網站字體應用及我們的實踐經驗為案例，分享如何隻用宋體和微軟雅黑這兩款中文字體，同樣設計出高大上的網頁。

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

悅讀FM是一個匯集閱讀、播音、音樂、攝影愛好者分享交流的平臺，主要面對的人群是年輕人。這個網站上所有頁面的文字，包括Logo的文字、導航、按鈕、文章標題、正文等，都采用瞭微軟雅黑字體，它們的區別隻是在不同欄目和不同層級采用瞭不同字號。

在上一篇介紹文字性格的文章中，我們曾描述過微軟雅黑給人的感受包括平和、幹凈、簡單、平靜、專業等。

在悅讀FM網站中，我們能看出這個網站整體設計風格就是幹凈簡單，不論是網頁佈局還是圖片搭配，都看起來清晰明瞭。這個平臺定位是 “傾聽文字的聲音”，用戶在這個網站上的行為主要是聽，文字則傾向於一種輔助作用。

用戶在聽的時候，可以時不時看看文字內容，微軟雅黑這款字體很好地向用戶展現出一種幹凈感，很符合網站想要傳遞的安靜、清新的意境。

知乎網是一個網絡問答社區，整個網站構成以文字為主，社區內的問答通常通過大篇幅的文字進行互動。

這個網站整站采用瞭宋體，文字標題與字號和正文有明顯的區別，這些設計突出瞭標題，也促進網站整體設計滿足最高質、最深度、最有收獲的閱讀體驗。

對字體的感受不那麼強烈?那咱們試試把網站字體換成微軟雅黑：

一眼看上去，換過字體後的網頁好像沒有什麼大變化，似乎讓網站還有瞭一種科技感。

但假如像下圖這樣呢?

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

AnyForWeb為杜卡迪設計開發的公司網站中，除瞭圖片中的特殊字體，整站中文字體采用瞭微軟雅黑。

與悅讀FM網站的清新風格不同，我們能明顯感受到這個網站傳達另一種感覺：現代化、速度與激情、酷炫，同時還有一種力量感。

我們再試試把網站字體換成宋體：

呃，怎麼看都覺得哪裡不對!

宋體在這裡看起來太輕瞭，完全不能表達文字闡述的“釋放”“動力”“速度”的感覺。而微軟雅黑雖然不像某些特殊字體那樣傳達強烈的速度感，但如果要選擇網頁中文字體，幹脆利落的微軟雅黑是一個很好的選擇。

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

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

簡書是一個讓用戶專註寫作和閱讀的平臺，它為用戶提供瞭兩款字體選擇模式：宋體、黑體。

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

在黑體模式下，整站就隻采用微軟雅黑字體，文章詳情頁的標題以加粗突出展現。這時候我們感受到的就是簡潔幹凈。

為瞭避免長篇文字帶來的厚重感，簡書采取自動分段功能，並且正文有固定的字號和行間距，這種排版佈局讓寫作者和閱讀者都感到舒適。

在宋體模式下，首頁文章標題是加粗宋體，作者名稱和文章發佈時間的小字也是宋體，下面的閱讀和評論部分使用瞭微軟雅黑。

文章詳情頁的標題使用瞭楷體，正文內容則是宋體。這種模式下瀏覽網頁，我們可以感受到一種文藝和優雅。

如果隻使用宋體，這個頁面可能會略顯普通，所以不要小看瞭這一處楷體的應用，這款俊雅字體的應用讓整個頁面散發出一種書卷氣息，可謂是點睛之筆。

而且大傢不要忘瞭，楷體也是系統預裝的字體之一，設計時不用顧慮排版問題。

另一個案例是AnyForWeb為漢路律師事務所設計開發的網站。

在看到圖之前，我們先想一下：律師行業網站應該給人什麼感覺?

傳統、專業、公正、官方、權威?沒錯!而具備這種特征的字體非宋體莫屬。我們來看網站展示：

在這個網站中，Logo本身已經傳達瞭傳統文化的感覺，如果文字全部采用宋體肯定會讓網站顯得呆板不生動。

所以設計師在導航欄應用瞭黑體， 標題部分則使用瞭微軟雅黑加粗，這樣搭配起來，既展現出專業的特征，又讓網站顯示出一種小小的獨特。

經驗提煉：

根據網站定位、整體設計風格以及文字性格選擇字體。

可以通過加粗、增加字號、文字顏色突出標題。

從這些案例中我們就能知道，在分析瞭網站定位、用戶人群，確定瞭設計風格後，隻用常規的幾款字體，我們一樣可以設計出高客戶滿意度的作品。

培戀網絡原創版權，轉載請註明出處：

培戀網原創版權，網站建設提供網站代運營、模板網站制作轉載請注明出處,本文地址：http://www.gdszrq.com/news/51900.html