CSS 中的字體兼容寫法：用CSS爲英文和中文字體分別設置不一樣的字體

　　font-family的調用方法：

font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei;

　　根據font-family的原則，假如客戶終端不認識前面的字體，就自動切換到第二種字體，第二種不認識就切換到第三種，以此類推。假如都不能識別就調用默認字體

　　根據font-family的字體調用原則，咱們能夠爲英文、中文等兩種字體調用不一樣的字體來渲染。如：Arial,'Times New Roman'這兩種字體不認識中文，只認識英文，因此這兩種字體只能渲染英文數字和一些特殊符號，而頁面中的中文就會自動調用第三種字體Microsoft YaHei(PS:假如存在這種字體的話)。

　　因此在定義字體的時候把英文的字體寫在前面把中文的寫在後面。這樣，系統就會自動按順序依次給字用字體，若是當前字體不支持文本，自動換用列表中的下一個字體。

　　咱們來看一看 CSS 中字體的 Fallback 機制：

font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;

　　就這樣一直找匹配的字體，直到系統默認，因此通常都把系統默認的5類字體放到 font-family 定義的最後來寫。

　　那麼一個國際化的站點應該如何設置多語種的字體呢？其前後順序如何設定？這裏強烈推薦 Airbnb 做爲參考。

[lang="ja"] body{ font-family:"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic」,
    "ＭＳ ゴシック","Helvetica Neue」,Helvetica,Arial,
    sans-serif !important } [lang="ko"] body{ font-family:"나눔 고딕","Nanum Gothic","맑은 고딕","Malgun Gothic」,
    "Apple Gothic","돋움",Dotum,"Helvetica Neue」,Helvetica,
    Arial,sans-serif !important } [lang^="zh"] body{ font-family:"Hiragino Sans GB」,"華文細黑","STHeiti","微軟雅黑",
    "Microsoft YaHei",SimHei,"Helvetica Neue」,Helvetica,Arial,
    sans-serif !important }

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

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

Font-family: SimSun, 「宋體」 Font-family: 「Microsoft YaHei」, 「微軟雅黑」 Font-family: STXihei, 「華文細黑」, 「Microsoft YaHei」, 「微軟雅黑」

　　永遠不要忘記聲明英文字體，而且英文字體應該在中文字體以前

　　記住這個事實：絕大部分中文字體裏包含英文字母（可是基本上都很醜），而英文字體裏不包含中文字符。在網頁裏中/英文混排是很常見的，你絕對不會喜歡用中文字體顯示英文的效果，因此必定不要忘了先聲明英文字體：

Font-family: Georgia, SimSun, 「宋體」 Font-family: Arial, 「Microsoft YaHei」, 「微軟雅黑」

　　做爲一個 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。