在 Web 上應(yīng)用字體是一項(xiàng)基本技術(shù)番挺，同時也是一門藝術(shù)。對于英文字體來說可選擇的范圍實(shí)在是太廣泛了吗浩，合理的使用它們將會為你的網(wǎng)站增色不少建芙。關(guān)于英文字體的使用和搭配技巧，在這里不做贅述懂扼，只推薦一套非常好的視頻：Fundamentals of Design by CodeSchool
而真正的挑戰(zhàn)在于中文字體禁荸，由于中文字體組成的特殊性導(dǎo)致其體積過于龐大，除了操作系統(tǒng)內(nèi)置的字體之外阀湿，我們很難在網(wǎng)站上應(yīng)用其他的字體赶熟。在可選性很差的前提之下，如何正確的使用中文字體呢陷嘴？
首先映砖，以下的字體聲明都是很糟糕的，切忌使用：
font-family: "宋體";
font-family: "宋體", Arial;
font-family: Arial, "宋體", "微軟雅黑";
font-family: Helvetica, Arial, "華文細(xì)黑", "微軟雅黑";
...
接下來灾挨，我們一步一步來說明如何定義好的字體聲明邑退。
中文字體也有英文名稱
很多開發(fā)者忽略了這一點(diǎn)：盡管我們在操作系統(tǒng)中常常看到宋體劳澄、微軟雅黑地技、華文細(xì)黑這樣的字體名稱，但實(shí)際上這只是字體的顯示名稱秒拔，而不是字體文件的名稱莫矗。雖然說在大多數(shù)情況下直接使用顯示名稱也有效，但有些用戶卻工作在一些很極端的情況下砂缩，這會導(dǎo)致你的字體聲明無效作谚。
比如說，用戶安裝了中文版的操作系統(tǒng)（這意味著系統(tǒng)有中文字體）庵芭，但是卻切換到了以英文為主要語言——這種情況在那些希望加強(qiáng)英語鍛煉的中文用戶當(dāng)中是很常見的妹懒。這時候，操作系統(tǒng)很有可能無法按照顯示名稱找到正確的字體双吆，所以我們要記住的第一件事情就是：同時聲明中文字體的字體名稱（英文）和顯示名稱（中文）彬伦，就像這樣：
font-family: SimSun, "宋體";
font-family: "Microsoft YaHei", "微軟雅黑";
font-family: STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑";
永遠(yuǎn)不要忘記聲明英文字體，并且英文字體應(yīng)該在中文字體之前
記住這個事實(shí)：絕大部分中文字體里包含英文字母（但是基本上都很丑）伊诵，而英文字體里不包含中文字符单绑。
在網(wǎng)頁里中/英文混排是很常見的，你絕對不會喜歡用中文字體顯示英文的效果曹宴，所以一定不要忘了先聲明英文字體：
font-family: Georgia, SimSun, "宋體";
font-family: Arial, "Microsoft YaHei", "微軟雅黑";
另外還有一個好習(xí)慣搂橙，就是在最后補(bǔ)充英文字體族的名稱。字體族大體上分為兩類：非襯線和襯線，它們之間的區(qū)別和使用規(guī)則請見本文開始介紹的視頻区转。一般來說苔巨，你應(yīng)該這么做：
font-family: Georgia, SimSun, "宋體", serif;
font-family: Arial, "Microsoft YaHei", "微軟雅黑", sans-serif;
請注意：以上兩句聲明中的宋體和微軟雅黑不應(yīng)該調(diào)換（盡管調(diào)換了也不會發(fā)生錯誤），這是因?yàn)閺淖煮w的式樣來看废离，微軟雅黑是非襯線的侄泽，而宋體才是襯線的。然而中文并不像英文那樣嚴(yán)格區(qū)分字體族蜻韭，所以這一點(diǎn)在實(shí)際應(yīng)用當(dāng)中并不那么重要悼尾。
別忘了照顧不同的操作系統(tǒng)
作為一個 Web 開發(fā)者，你理應(yīng)對 Windows, Mac OS, Linux 家族等常用操作系統(tǒng)里的系統(tǒng)字體有足夠的了解肖方，特別是中文闺魏。在這里，我們假設(shè)目標(biāo)網(wǎng)站要同時給予 windows 用戶和 mac 用戶最好的字體體驗(yàn)俯画，于是我們可以這樣聲明：
font-family: Helvetica, Tahoma, Arial, STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑", sans-serif;
這句聲明都做到哪些事情呢析桥？讓我們一一說明（括號內(nèi)代表其對應(yīng)的目標(biāo)操作系統(tǒng)）：
- 對于英文字符，首先查找
Helvetica(Mac)艰垂，然后查找Tahoma(Win)泡仗，都找不到就用Arial(Mac&Win)；若是以上三者都缺失猜憎，則使用當(dāng)前默認(rèn)的sans-serif字體(操作系統(tǒng)或?yàn)g覽器指定)娩怎； - 對于中文字體，我們已經(jīng)了解其規(guī)則了拉宗。
華文細(xì)黑(Mac)，微軟雅黑(Win)是這兩個平臺的默認(rèn)中文字體辣辫。
注意向下兼容
到此為止旦事，我們的字體聲明已經(jīng)很不錯了——如果你不必考慮還在使用舊版本操作系統(tǒng)的用戶的話。遺憾地是急灭，中文市場還有大量的用戶在使用 Windows XP姐浮，宋體才是他們的主要中文字體。為了照顧到這些用戶葬馋，你可以為微軟雅黑增加一個 fallback：
font-family: Helvetica, Tahoma, Arial, STXihei, "華文細(xì)黑", Heiti, "黑體", "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;
同樣地卖鲤，你看到我們也為 Mac 系統(tǒng)使用了黑體作為 fallback。
其他
不加雙引號可以嗎畴嘶？
可以蛋逾。有些英文字體的名稱多于兩個單詞，因?yàn)閱卧~中間有空格所以需要用""包裹起來窗悯。中文字體很特別区匣，按照英文的角度來看，像微軟雅黑究竟算是一個詞還是四個詞呢蒋院？沒關(guān)系亏钩，好在中文字體的名稱里沒有空格莲绰，所以 ""不加也沒什么大礙。
不過姑丑，誰都不能保證在任何操作系統(tǒng)/瀏覽器環(huán)境下都是如此蛤签，若是發(fā)生了奇怪的事情，不妨加上雙引號試試看栅哀。
可以默認(rèn)顯示某種字體嗎震肮？比如微軟雅黑
你可能注意到了，在我們最后的字體聲明里昌屉，華文細(xì)黑是默認(rèn)字體（如果你的系統(tǒng)上安裝了聲明里所有的中文字體的話）钙蒙，為什么我要先聲明 Mac 系統(tǒng)的字體呢？
按理來說间驮，大多數(shù)網(wǎng)站的主要目標(biāo)市場還是 Windows 用戶的躬厌，所以理論上這個才是合理的聲明：
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", STXihei, "華文細(xì)黑", Heiti, "黑體", sans-serif;
但實(shí)際上卻并非如此。在中文字體的用戶群體里竞帽，很大一部分擁有 Mac 的人都同時安裝了 Win 下常用的中文字體（這得歸功于 Office for Mac）扛施；但極少有 Win 用戶去安裝 Mac 下的中文字體。
因此屹篓，把 Mac 用字體聲明在前面幾乎不會對 Win 用戶產(chǎn)生什么影響（因?yàn)樗麄儔焊鶝]有８碓），倒是用來做 fallback 的黑體可能會取代微軟雅黑的位置堆巧，所以更保險的做法或許是這樣：
font-family: Helvetica, Tahoma, Arial, STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", Heiti, "黑體", sans-serif;
但無論如何請不要把微軟雅黑放在中文字體的最前面妄荔，作為史上最丑陋的中文字體之一，微軟雅黑實(shí)在不是什么好的選擇谍肤，請照顧一下被 Mac 寵壞的用戶吧啦租，謝謝！（僅代表個人觀點(diǎn)）
BTW荒揣，如果你也像我一樣不喜歡呆頭呆腦的微軟雅黑篷角，那就干脆把它刪了吧~
到此為止，雖然在我們的示例代碼里沒有包含 Linux 家族的例子系任，不過相信你也明白該怎么做了吧恳蹲。
一點(diǎn)補(bǔ)充
鑒于一些人對微軟雅黑的排位產(chǎn)生異議，我不妨把上文的解決方案再延伸一步俩滥。事實(shí)是這樣子的：
- 把
微軟雅黑放前面嘉蕾，會導(dǎo)致安裝了微軟雅黑字體的 Mac 用戶不得不面對微軟雅黑，而在 Mac 下比微軟雅黑優(yōu)雅得多的中文字體比比皆是霜旧； - 把 Mac 下的字體放前面荆针，也會對 Windows 用戶造成差不多的困惑，畢竟
微軟雅黑是 Windows 平臺下顯示效果最好的字體（目前為止）；
1 和 2航背，哪一種出現(xiàn)的概率更大一些喉悴？我想這是一個不需要計算就能知道的答案吧？
但是——的確還有另外兩個因素在糾結(jié)著：
- 不少 Windows 用戶因?yàn)楦鞣N原因關(guān)閉了 ClearType玖媚，在此情形下微軟雅黑將會慘不忍睹箕肃！但是 Mac 的字體也不是好的選擇，真正的勝出者今魔？猜對了勺像，宋體。
- 絕大部分 Mac 下的黑體在 Windows 下模糊不清错森，而微軟雅黑雖然丑但在 Mac 下至少能看吟宦。（間接體現(xiàn)了兩個平臺的字體渲染技術(shù)的差距）
所以在實(shí)踐中，真正接近“萬無一失”的方案需要考慮以下幾點(diǎn)：
- 利用 UA 判斷為不同的平臺加載不一樣的字體聲明涩维；
- 除非有特別的原因殃姓，否則盡量保持正文用
宋體，標(biāo)題和其他可以放大些的地方用微軟雅黑（針對 Windows）瓦阐； - Mac 下的
冬青體效果極佳蜗侈，但是該字體在 Mac OS X 10.6 以前是沒有的，所以謹(jǐn)慎考慮你的用戶群體睡蟋，或者使用華文黑體系列做 fallback踏幻；
最后，我不想再和任何人爭論字體的優(yōu)劣戳杀，本文的目的是介紹使用方法而不是字體選擇该面。“美”或“丑”向來都是很主觀的事情信卡，只因?yàn)槲沂亲髡吒糇海晕颐獠涣藭袃A向性，然而我也相信你自己會有正確的判斷坐求，和我較真沒有任何實(shí)際意義蚕泽。
原文出處
本文并非原創(chuàng)晌梨，原文出處 傳送門
