2013-12-24 藍藍設計的小編
轉載藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計：在 Web 設計上應用字體是一項基本技術，同時也是一門藝術。對于英文字體來說可選擇的范圍實在是太廣泛了，合理的使用它們將會為你的網站增色不少。關于英文字體的使用和搭配技巧，在這里不做贅述，只推薦一套非常好的視頻：Fundamentals of Design by CodeSchool
相關好文：
新手入門：選擇字體的五個原則
淺析中英文基本字形的演變和發展
2012年度最佳移動網頁字體設計
推薦！跨平臺字體效果淺析
而真正的挑戰在于中文字體，由于中文字體組成的特殊性導致其體積過于龐大，除了操作系統內置的字體之外，我們很難在網站上應用其他的字體。在可選性很差的前提之下，如何正確的使用中文字體呢？
首先，以下的字體聲明都是很糟糕的，切忌使用：
Font-family: “宋體”
Font-family: “宋體”，Arial；
Font-family: Arial，”宋體”，”微軟雅黑”；
Font-family: Helvetica，Arial，”華文細黑”，”微軟雅黑”；
接下來，我們一步一步來說明如何定義好的字體聲明。
很多開發者忽略了這一點：盡管我們在操作系統中常?？吹?strong>宋體、微軟雅黑、華文細黑這樣的字體名稱，但實際上這只是字體的顯示名稱，而不是字體文件的名稱。雖然說在大多數情況下直接使用顯示名稱也有效，但有些用戶卻工作在一些很極端的情況下，這會導致你的字體聲明無效。
比如說，用戶安裝了中文版的操作系統（這意味著系統有中文字體），但是卻切換到了以英文為主要語言——這種情況在那些希望加強英語鍛煉的中文用戶當中是很常見的。這時候，操作系統很有可能無法按照顯示名稱找到正確的字體，所以我們要記住的第一件事情就是： 同時聲明中文字體的字體名稱（英文）和顯示名稱（中文），就像這樣：
Font-family: SimSun, “宋體”
Font-family: “Microsoft YaHei”, “微軟雅黑”
Font-family: STXihei, “華文細黑”, “Microsoft YaHei”, “微軟雅黑”
記住這個事實：絕大部分中文字體里包含英文字母（但是基本上都很丑），而英文字體里不包含中文字符。
在網頁里中/英文混排是很常見的，你絕對不會喜歡用中文字體顯示英文的效果，所以一定不要忘了先聲明英文字體：
Font-family: Georgia, SimSun, “宋體”
Font-family: Arial, “Microsoft YaHei”, “微軟雅黑”
另外還有一個好習慣，就是在最后補充英文字體族的名稱。字體族大體上分為兩類：非襯線和襯線，它們之間的區別和使用規則請見本文開始介紹的視頻。一般來說，你應該這么做：
Font-family: Georgia, SimSun, “宋體”, serif
Font-family: Arial, “Microsoft YaHei”, “微軟雅黑”, sans-serif
請注意：以上兩句聲明中的宋體和微軟雅黑不應該調換（盡管調換了也不會發生錯誤），這是因為從字體的式樣來看，微軟雅黑是非襯線的，而宋體才是襯線的。然而中文并不像英文那樣嚴格區分字體族，所以這一點在實際應用當中并不那么重要。
作為一個 Web 開發者，你理應對 Windows, Mac OS, Linux 家族等常用操作系統里的系統字體有足夠的了解，特別是中文。在這里，我們假設目標網站要同時給予 windows 用戶和 mac 用戶最好的字體體驗，于是我們可以這樣聲明：
Font-family: Helvetica, Tahoma, Arial, STXihei, “華文細黑”, “Microsoft YaHei”, “微軟雅黑”, sans-serif
這句聲明都做到哪些事情呢？讓我們一一說明（括號內代表其對應的目標操作系統）：
到此為止，我們的字體聲明已經很不錯了——如果你不必考慮還在使用舊版本操作系統的用戶的話。遺憾地是，中文市場還有大量的用戶在使用 Windows XP，宋體才是他們的主要中文字體。為了照顧到這些用戶，你可以為微軟雅黑增加一個 fallback：
font-family: Helvetica, Tahoma, Arial, STXihei, “華文細黑”, Heiti, “黑體”, “Microsoft YaHei”, “微軟雅黑”, SimSun, “宋體”, sans-serif
同樣地，你看到我們也為 Mac 系統使用了黑體作為 fallback。
可以。有些英文字體的名稱多于兩個單詞，因為單詞中間有空格所以需要用 "" 包裹起來。中文字體很特別，按照英文的角度來看，像微軟雅黑究竟算是一個詞還是四個詞呢？沒關系，好在中文字體的名稱里沒有空格，所以 "" 不加也沒什么大礙。
不過，誰都不能保證在任何操作系統/瀏覽器環境下都是如此，若是發生了奇怪的事情，不妨加上雙引號試試看。
你可能注意到了，在我們最后的字體聲明里，華文細黑是默認字體（如果你的系統上安裝了聲明里所有的中文字體的話），為什么我要先聲明 Mac 系統的字體呢？
按理來說，大多數網站的主要目標市場還是 Windows 用戶的，所以理論上這個才是合理的聲明：
Font-family: Helvetica, Tahoma, Arial, “Microsoft YaHei”, “微軟雅黑”, SimSun, “宋體”, STXihei, “華文細黑”, Heiti, “黑體”, sans-serif
但實際上卻并非如此。在中文字體的用戶群體里，很大一部分擁有 Mac 的人都同時安裝了 Win 下常用的中文字體（這得歸功于 Office for Mac）；但極少有 Win 用戶去安裝 Mac 下的中文字體.
因此，把 Mac 用字體聲明在前面幾乎不會對 Win 用戶產生什么影響（因為他們壓根沒有！），倒是用來做 fallback 的黑體可能會取代微軟雅黑的位置，所以更保險的做法或許是這樣：
Font-family: Helvetica, Tahoma, Arial, STXihei, “華文細黑”, “Microsoft YaHei”, “微軟雅黑”, SimSun, “宋體”, Heiti, “黑體”, sans-serif
但無論如何請不要把微軟雅黑放在中文字體的最前面，作為史上最丑陋的中文字體之一，微軟雅黑實在不是什么好的選擇，請照顧一下被 Mac 寵壞的用戶吧，謝謝！（僅代表個人觀點）
BTW，如果你也像我一樣不喜歡呆頭呆腦的微軟雅黑，那就干脆把它刪了吧~
到此為止，雖然在我們的示例代碼里沒有包含 Linux 家族的例子，不過相信你也明白該怎么做了吧。
鑒于一些人對微軟雅黑的排位產生異議，我不妨把上文的解決方案再延伸一步。事實是這樣子的：
1 和 2，哪一種出現的概率更大一些？我想這是一個不需要計算就能知道的答案吧？
但是——的確還有另外兩個因素在糾結著：
所以在實踐中，真正接近”萬無一失”的方案需要考慮以下幾點：
最后，我不想再和任何人爭論字體的優劣，本文的目的是介紹使用方法而不是字體選擇。”美”或”丑”向來都是很主觀的事情，只因為我是作者，所以我免不了會有傾向性，然而我也相信你自己會有正確的判斷，和我較真沒有任何實際意義。