在 Web 上應(yīng)用字體是一項(xiàng)基本技術(shù)，同時(shí)也是一門(mén)藝術(shù)。對(duì)于英文字體來(lái)說(shuō)可選擇的范圍實(shí)在是太廣泛了，合理的使用它們將會(huì)為你的網(wǎng)站增色不少。

　　而真正的挑戰(zhàn)在于中文字體，由于中文字體組成的特殊性導(dǎo)致其體積過(guò)于龐大，除了操作系統(tǒng)內(nèi)置的字體之外，我們很難在網(wǎng)站上應(yīng)用其他的字體。在可選性很差的前提之下，如何正確的使用中文字體呢?

　　首先，以下的字體聲明都是很糟糕的，切忌使用：

　　Font-family: “宋體”

　　Font-family: “宋體”，Arial;

　　Font-family: Arial，”宋體”，”微軟雅黑”;

　　Font-family: Helvetica，Arial，”華文細(xì)黑”，”微軟雅黑”;

　　接下來(lái)，我們一步一步來(lái)說(shuō)明如何定義好的字體聲明。

　　中文字體也有英文名稱(chēng)

　　很多開(kāi)發(fā)者忽略了這一點(diǎn)：盡管我們?cè)诓僮飨到y(tǒng)中常?？吹剿误w、微軟雅黑、華文細(xì)黑這樣的字體名稱(chēng)，但實(shí)際上這只是字體的顯示名稱(chēng)，而不是字體文件的名稱(chēng)。雖然說(shuō)在大多數(shù)情況下直接使用顯示名稱(chēng)也有效，但有些用戶(hù)卻工作在一些很極端的情況下，這會(huì)導(dǎo)致你的字體聲明無(wú)效。

　　比如說(shuō)，用戶(hù)安裝了中文版的操作系統(tǒng)(這意味著系統(tǒng)有中文字體)，但是卻切換到了以英文為主要語(yǔ)言——這種情況在那些希望加強(qiáng)英語(yǔ)鍛煉的中文用戶(hù)當(dāng)中是很常見(jiàn)的。這時(shí)候，操作系統(tǒng)很有可能無(wú)法按照顯示名稱(chēng)找到正確的字體，所以我們要記住的第一件事情就是： 同時(shí)聲明中文字體的字體名稱(chēng)(英文)和顯示名稱(chēng)(中文)，就像這樣：

　　Font-family: SimSun, “宋體”

　　Font-family: “Microsoft YaHei”, “微軟雅黑”

　　Font-family: STXihei, “華文細(xì)黑”, “Microsoft YaHei”, “微軟雅黑”

　　永遠(yuǎn)不要忘記聲明英文字體，并且英文字體應(yīng)該在中文字體之前

　　記住這個(gè)事實(shí)：絕大部分中文字體里包含英文字母(但是基本上都很丑)，而英文字體里不包含中文字符。

　　在網(wǎng)頁(yè)里中/英文混排是很常見(jiàn)的，你絕對(duì)不會(huì)喜歡用中文字體顯示英文的效果，所以一定不要忘了先聲明英文字體：

　　Font-family: Georgia, SimSun, “宋體”

　　Font-family: Arial, “Microsoft YaHei”, “微軟雅黑”

　　另外還有一個(gè)好習(xí)慣，就是在最后補(bǔ)充英文字體族的名稱(chēng)。字體族大體上分為兩類(lèi)：非襯線(xiàn)和襯線(xiàn)，它們之間的區(qū)別和使用規(guī)則請(qǐng)見(jiàn)本文開(kāi)始介紹的視頻。一般來(lái)說(shuō)，你應(yīng)該這么做：

　　Font-family: Georgia, SimSun, “宋體”, serif

　　Font-family: Arial, “Microsoft YaHei”, “微軟雅黑”, sans-serif

　　請(qǐng)注意：以上兩句聲明中的宋體和微軟雅黑不應(yīng)該調(diào)換(盡管調(diào)換了也不會(huì)發(fā)生錯(cuò)誤)，這是因?yàn)閺淖煮w的式樣來(lái)看，微軟雅黑是非襯線(xiàn)的，而宋體才是襯線(xiàn)的。然而中文并不像英文那樣嚴(yán)格區(qū)分字體族，所以這一點(diǎn)在實(shí)際應(yīng)用當(dāng)中并不那么重要。

　　別忘了照顧不同的操作系統(tǒng)

　　作為一個(gè) Web 開(kāi)發(fā)者，你理應(yīng)對(duì) Windows, Mac OS, Linux 家族等常用操作系統(tǒng)里的系統(tǒng)字體有足夠的了解，特別是中文。在這里，我們假設(shè)目標(biāo)網(wǎng)站要同時(shí)給予 windows 用戶(hù)和 mac 用戶(hù)最好的字體體驗(yàn)，于是我們可以這樣聲明：

　　Font-family: Helvetica, Tahoma, Arial, STXihei, “華文細(xì)黑”, “Microsoft YaHei”, “微軟雅黑”, sans-serif

　　這句聲明都做到哪些事情呢?讓我們一一說(shuō)明(括號(hào)內(nèi)代表其對(duì)應(yīng)的目標(biāo)操作系統(tǒng))：

　　對(duì)于英文字符，首先查找Helvetica(Mac)，然后查找Tahoma(Win)，都找不到就用Arial(Mac&Win);若是以上三者都缺失，則使用當(dāng)前默認(rèn)的sans-serif字體(操作系統(tǒng)或?yàn)g覽器指定);

　　對(duì)于中文字體，我們已經(jīng)了解其規(guī)則了。華文細(xì)黑(Mac)，微軟雅黑(Win)是這兩個(gè)平臺(tái)的默認(rèn)中文字體。

　　注意向下兼容

　　到此為止，我們的字體聲明已經(jīng)很不錯(cuò)了——如果你不必考慮還在使用舊版本操作系統(tǒng)的用戶(hù)的話(huà)。遺憾地是，中文市場(chǎng)還有大量的用戶(hù)在使用 Windows XP，宋體才是他們的主要中文字體。為了照顧到這些用戶(hù)，你可以為微軟雅黑增加一個(gè) fallback：

　　font-family: Helvetica, Tahoma, Arial, STXihei, “華文細(xì)黑”, Heiti, “黑體”, “Microsoft YaHei”, “微軟雅黑”, SimSun, “宋體”, sans-serif

　　同樣地，你看到我們也為 Mac 系統(tǒng)使用了黑體作為 fallback。

　　其他

　　不加雙引號(hào)可以嗎?

　　可以。有些英文字體的名稱(chēng)多于兩個(gè)單詞，因?yàn)閱卧~中間有空格所以需要用 "" 包裹起來(lái)。中文字體很特別，按照英文的角度來(lái)看，像微軟雅黑究竟算是一個(gè)詞還是四個(gè)詞呢?沒(méi)關(guān)系，好在中文字體的名稱(chēng)里沒(méi)有空格，所以 "" 不加也沒(méi)什么大礙。

　　不過(guò)，誰(shuí)都不能保證在任何操作系統(tǒng)/瀏覽器環(huán)境下都是如此，若是發(fā)生了奇怪的事情，不妨加上雙引號(hào)試試看。

　　可以默認(rèn)顯示某種字體嗎?比如微軟雅黑

　　你可能注意到了，在我們最后的字體聲明里，華文細(xì)黑是默認(rèn)字體(如果你的系統(tǒng)上安裝了聲明里所有的中文字體的話(huà))，為什么我要先聲明 Mac 系統(tǒng)的字體呢?

　　按理來(lái)說(shuō)，大多數(shù)網(wǎng)站的主要目標(biāo)市場(chǎng)還是 Windows 用戶(hù)的，所以理論上這個(gè)才是合理的聲明：

　　Font-family: Helvetica, Tahoma, Arial, “Microsoft YaHei”, “微軟雅黑”, SimSun, “宋體”, STXihei, “華文細(xì)黑”, Heiti, “黑體”, sans-serif

　　但實(shí)際上卻并非如此。在中文字體的用戶(hù)群體里，很大一部分擁有 Mac 的人都同時(shí)安裝了 Win 下常用的中文字體(這得歸功于 Office for Mac);但極少有 Win 用戶(hù)去安裝 Mac 下的中文字體.

　　因此，把 Mac 用字體聲明在前面幾乎不會(huì)對(duì) Win 用戶(hù)產(chǎn)生什么影響(因?yàn)樗麄儔焊鶝](méi)有!)，倒是用來(lái)做 fallback 的黑體可能會(huì)取代微軟雅黑的位置，所以更保險(xiǎn)的做法或許是這樣：

　　Font-family: Helvetica, Tahoma, Arial, STXihei, “華文細(xì)黑”, “Microsoft YaHei”, “微軟雅黑”, SimSun, “宋體”, Heiti, “黑體”, sans-serif

　　但無(wú)論如何請(qǐng)不要把微軟雅黑放在中文字體的最前面，作為史上最丑陋的中文字體之一，微軟雅黑實(shí)在不是什么好的選擇，請(qǐng)照顧一下被 Mac 寵壞的用戶(hù)吧，謝謝!(僅代表個(gè)人觀點(diǎn))

　　BTW，如果你也像我一樣不喜歡呆頭呆腦的微軟雅黑，那就干脆把它刪了吧~

　　到此為止，雖然在我們的示例代碼里沒(méi)有包含 Linux 家族的例子，不過(guò)相信你也明白該怎么做了吧。

　　一點(diǎn)補(bǔ)充

　　鑒于一些人對(duì)微軟雅黑的排位產(chǎn)生異議，我不妨把上文的解決方案再延伸一步。事實(shí)是這樣子的：

　　把微軟雅黑放前面，會(huì)導(dǎo)致安裝了微軟雅黑字體的 Mac 用戶(hù)不得不面對(duì)微軟雅黑，而在 Mac 下比微軟雅黑優(yōu)雅得多的中文字體比比皆是;

　　把 Mac 下的字體放前面，也會(huì)對(duì) Windows 用戶(hù)造成差不多的困惑，畢竟微軟雅黑是 Windows 平臺(tái)下顯示效果最好的字體(目前為止);

　　1 和 2，哪一種出現(xiàn)的概率更大一些?我想這是一個(gè)不需要計(jì)算就能知道的答案吧?

　　但是——的確還有另外兩個(gè)因素在糾結(jié)著：

　　不少 Windows 用戶(hù)因?yàn)楦鞣N原因關(guān)閉了 ClearType，在此情形下微軟雅黑將會(huì)慘不忍睹!但是 Mac 的字體也不是好的選擇，真正的勝出者?猜對(duì)了，宋體。

　　絕大部分 Mac 下的黑體在 Windows 下模糊不清，而微軟雅黑雖然丑但在 Mac 下至少能看。(間接體現(xiàn)了兩個(gè)平臺(tái)的字體渲染技術(shù)的差距)

　　所以在實(shí)踐中，真正接近”萬(wàn)無(wú)一失”的方案需要考慮以下幾點(diǎn)：

　　利用 UA 判斷為不同的平臺(tái)加載不一樣的字體聲明;

　　除非有特別的原因，否則盡量保持正文用宋體，標(biāo)題和其他可以放大些的地方用微軟雅黑(針對(duì) Windows);

　　Mac 下的冬青體效果極佳，但是該字體在 Mac OS X 10.6 以前是沒(méi)有的，所以謹(jǐn)慎考慮你的用戶(hù)群體，或者使用華文黑體系列做 fallback;

　　最后，我不想再和任何人爭(zhēng)論字體的優(yōu)劣，本文的目的是介紹使用方法而不是字體選擇。”美”或”丑”向來(lái)都是很主觀的事情，只因?yàn)槲沂亲髡撸晕颐獠涣藭?huì)有傾向性，然而我也相信你自己會(huì)有正確的判斷，和我較真沒(méi)有任何實(shí)際意義。

最新評(píng)論