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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

但假如像下圖這樣呢？

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

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

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

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

呃，怎么看都覺得哪里不對！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

經驗提煉：

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

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

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

本文就先介紹到這里，下一期我們為大家分享網頁設計最佳實踐經驗分享之字號篇。