中文網頁的字體

本站字體按照以下設置，正文字體大小採用18px，文檔採用MARKDOWN編輯。

在 Web 上應用字體是一項基本技術，同時也是一門藝術。對於英文字體來講可選擇的範圍實在是太普遍了，合理的使用它們將會爲你的網站增色很多。關於英文字體的使用和搭配技巧，在這裏不作贅述，只推薦一套很是好的視頻：Fundamentals of Design by CodeSchool

{{more}}

而真正的挑戰在於中文字體，因爲中文字體組成的特殊性致使其體積過於龐大，除了操做系統內置的字體以外，咱們很難在網站上應用其餘的字體。在可選性不好的前提之下，如何正確的使用中文字體呢？

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

font-family: "宋體";

font-family: "宋體", Arial;

font-family: Arial, "宋體", "微軟雅黑";

font-family: Helvetica, Arial, "華文細黑", "微軟雅黑";

...


中文字體也有英文名稱

不少開發者忽略了這一點：儘管咱們在操做系統中經常看到宋體、微軟雅黑、華文細黑這樣的字體名稱，但實際上這只是字體的顯示名稱，而不是字體文件的名稱。雖說在大多數狀況下直接使用顯示名稱也有效，但有些用戶卻工做在一些很極端的狀況下，這會致使你的字體聲明無效。

好比說，用戶安裝了中文版的操做系統（這意味着系統有中文字體），可是卻切換到了以英文爲主要語言——這種狀況在那些但願增強英語鍛鍊的中文用戶當中是很常見的。這時候，操做系統頗有可能沒法按照顯示名稱找到正確的字體，因此咱們要記住的第一件事情就是： 同時聲明中文字體的字體名稱（英文）和顯示名稱（中文），就像這樣：

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;


這句聲明都作到哪些事情呢？讓咱們一一說明（括號內表明其對應的目標操做系統）：

對於英文字符，首先查找Helvetica(Mac)，而後查找Tahoma(Win)，都找不到就用Arial(Mac&Win)；如果以上三者都缺失，則使用當前默認的sans-serif字體(操做系統或瀏覽器指定)；
對於中文字體，咱們已經瞭解其規則了。華文細黑(Mac)，微軟雅黑(Win)是這兩個平臺的默認中文字體。

注意向下兼容

到此爲止，咱們的字體聲明已經很不錯了——若是你沒必要考慮還在使用舊版本操做系統的用戶的話。遺憾地是，中文市場還有大量的用戶在使用 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 家族的例子，不過相信你也明白該怎麼作了吧。

一點補充

鑑於一些人對微軟雅黑的排位產生異議，我不妨把上文的解決方案再延伸一步。事實是這樣子的：


把微軟雅黑放前面，會致使安裝了微軟雅黑字體的 Mac 用戶不得不面對微軟雅黑，而在 Mac 下比微軟雅黑優雅得多的中文字體比比皆是；
把 Mac 下的字體放前面，也會對 Windows 用戶形成差很少的困惑，畢竟微軟雅黑是 Windows 平臺下顯示效果最好的字體（目前爲止）；


1 和 2，哪種出現的機率更大一些？我想這是一個不須要計算就能知道的答案吧？

可是——的確還有另外兩個因素在糾結着：


很多 Windows 用戶由於各類緣由關閉了 ClearType，在此情形下微軟雅黑將會慘不忍睹！可是 Mac 的字體也不是好的選擇，真正的勝出者？猜對了，宋體。
絕大部分 Mac 下的黑體在 Windows 下模糊不清，而微軟雅黑雖然醜但在 Mac 下至少能看。（間接體現了兩個平臺的字體渲染技術的差距）


因此在實踐中，真正接近「萬無一失」的方案須要考慮如下幾點：


利用 UA 判斷爲不一樣的平臺加載不同的字體聲明；
除非有特別的緣由，不然儘可能保持正文用宋體，標題和其餘能夠放大些的地方用微軟雅黑（針對 Windows）；
Mac 下的冬青體效果極佳，可是該字體在 Mac OS X 10.6 之前是沒有的，因此謹慎考慮你的用戶羣體，或者使用華文黑體系列作 fallback；


最後，我不想再和任何人爭論字體的優劣，本文的目的是介紹使用方法而不是字體選擇。「美」或「醜」向來都是很主觀的事情，只由於我是做者，因此我免不了會有傾向性，然而我也相信你本身會有正確的判斷，和我較真沒有任何實際意義。

本文來自於nightire，原文地址。

原文連接：http://designlei.com/coding/%e4%b8%ad%e6%96%87%e7%bd%91%e9%a1%b5%e7%9a%84%e5%ad%97%e4%bd%93/