幾步讓你的網站精美亮瞎眼：字體篇

　　原本僅僅是為了寫出一篇有關網站制作視覺方面的東西，誰知道一旦寫出來回就罷不了手了。目前來子寒互動視覺的朋友主要還是為了找wordpress教程或者是主題的，因此像這樣有關設計理念及技巧的東西暫時並不討喜。但我可以這麼說，從事或想從事設計行業的朋友或許真的可以從中得到某些啟示，可能其中很多東西對於您來說已經是老生常談了，但總有些東西是你一直沒有注意到的。

　　像設計這一行業，我認為最怕的就是那些所謂的幾大技巧、幾大經驗之類大而虛的文章，可以說那些文章純粹就是官話體，毫無任何意義可言。我們所要面對的 case瞬息萬變，怎麼可能只通過幾句話就可以成為真理妙藥呢?也正因為此，為了給一些想從事這個行業的朋友一個真摯的東西，所以在本系列文章中模糊了具體步驟的實現，我想大家也能明白我的用心所在吧!

　　還是那句話，這永遠都不是一篇填鴨式的、條框式的設計教程，也不會是一篇自謂真知灼見的炫耀文，而是一篇旨在拋磚引玉、能夠吸引大家來針對設計的種種理念進行探討的文章。

　　廢話一說起來就止不住!上面一個章節中，我們主要就網站的縱向布局展開了探討，感興趣的朋友可以去那篇文章進行閱讀《幾步讓你的網站精美亮瞎眼(3)》，在本篇文章中我們將對網站互動視覺的另外一個特別重要而特別容易被忽視的元素：字體排版來展開一些深入的討論。

　　　一、作為“內容為王”的主體元素，我們應該給予足夠的重視

　　不管一個網站是針對何種行業及目的而建立的，文字永遠都是網站內容最為重要的組成部分。因為只有通過文字，我們才能獲知此網站所要表達的意思。

　　關於文字存在對於一個網站的必要性，這一點是毋庸置疑的，但是針對視覺方面怎麼去處理這些文字的顯示，恐怕就是大多數人並不太注重的細節問題了。

　　　二、中文字體：在貧乏中求突破

　　在開始探討之前，我們應該先就安全字體方面來進行一些簡單的探討，其實我們早在另一篇文章已經就這個問題著重討論過了，有興趣的朋友可以去看一下：《web頁面如何設置安全美觀的字體》。在那篇文章中，我們得到了一個很令人沮喪的現實，為了確保我們所設置的字體在大多數終端上可以完美顯示，似乎我們只剩下了一種宋體可供選擇，這也是為啥一些較大的網站如百度、新浪、騰訊等均將字體設置為宋體的原因了。當然由於windows xp用戶逐漸將自己的系統變為了vista、win7等以上版本的系統，微軟雅黑作為安全字體的可能性也越來越大了，因此像百度這樣的站點也會在字體的設置上稍微做出了一個調整，在很多百度的新功能頁面裡，第一字體被選擇成了微軟雅黑，而宋體僅僅是作為第二字體來存在。

　　微軟雅黑在顯示方面的確要比宋體漂亮的多，無論是字形還平滑度都要美觀的多，但微軟雅黑的12px以下的顯示並不是很好，另外它在不同尺寸的顯示器終端上的顯示並不相同，甚至會產生較大的視覺波動。我在家中的1600*900分辨率下，頁面的微軟雅黑字體明顯呈扁方狀，而在公司的1920*1080的分辨率下則會顯示成長方狀，在這種視覺的穩定性方面，宋體要比微軟雅黑好那麼一點。

　　無論怎麼樣，我們的可選中文字體是極為貧乏的，這也就是字體在視覺方面並不被受重視的原因之一，很多人都有一個慣性的思維：反正可選的中文字體也就那幾種，無論怎麼樣也弄不出啥花樣出來，干脆就隨它去吧!

　　這個慣性思維顯然會害了我們，即使我們的頁面UI做的再細致，只要你在字體的選擇及排版上不加注意的話，你的頁面仍然是一個“山寨貨”，甚至會因為字體的未加斟酌而極度破壞了我們原有頁面設計。

　　　三、細節的表現將會使站點看起來很專業或者很山寨

　　其實，不管是針對於一個品牌還是一個站點，其帶給人的專業程度還是取決於細節方面的處理。千萬不要小瞧了這些細節問題，很有可能就是因為這個小小的細節便會使你的整個頁面立刻飛升或是墮入“山寨”之流。再回到字體使用的探討上去，既然可供我們自由選擇的安全中文字體已經到了無比匮乏的地步，但這並不意味著我們在字體的編排細節上就無可作為了。

　　下面先讓我們來看一下例子：

　　在上圖中，我們使用了百度音樂的邊欄分類編排與一家家裝類網站的邊欄分類編排做比較，孰勝孰劣一目了然。其實像這種情況並不少見，而在很多時候裝大牌的網站都會在細節的處理上露出馬腳出來。一般一個較為有實力的站點肯定是不缺各種人才的，即使他們是委托其他公司來對站點進行制作和設計，在細節的要求上也是很苛刻的。山寨與正規之間的最大區別不還是細節麼?很多裝大牌的網站並不具備這種人才優勢，甚至很可能是一兩個人在處理各方面的事情(大多數站點還都是屬於個人經營的)，因此在保證文章內容更新以及推廣優化之外，他們根本就沒有精力去顧及這些事情。如果說僅僅是沒有精力去顧及倒是不太嚴重，可能一旦找到合適的人才或是自己空出時間來會這些細節做一步步的調整。但遺憾的是，很多人並沒有注意到這一點，這使他們永遠都不會想到這個細節，這也就使得他們的網站永遠只能徘徊在二、三流的行列，拋棄其他方面不說，但說視覺而帶來的可信任度方面，正規的真正的大牌已經甩他們幾條街了。

　　放在生活中來舉例，我們也應該能明白這個道理，假使你去買衣服，有個品牌的服裝外觀上與他們宣傳的東西幾乎無差，但實物的做工卻很差，這時候你會懷疑什麼?你一定不會懷疑到這個品牌的，你只是會懷疑這家店裡賣的可能使山寨貨。

　　同理，在網頁設計上也是這樣，哪怕你的設計與大牌再怎麼相似、再怎麼功能強大，但在做工上卻粗糙不堪，最終反而暴露了自己的“山寨本質”。因為時間的關系，我們今天先說這裡，關於文字排版處理方面的探討我們將在下一章節中繼續進行，敬請關注!

　　原創作者：子寒互動視覺

　　原文地址：http://www.xmlas.com/web-visual-talk-hallowly-4.html(原創文章，轉載請保留)