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 Pゴシック","MS PGothic","MS Gothic”,
    "MS ゴシック","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

  這句聲明都做到哪些事情呢?讓我們一一說明(括號內代表其對應的目標操作系統):

  1、對於英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,則使用當前默認的sans-serif字體(操作系統或瀏覽器指定);

  2、對於中文字體,我們已經了解其規則了。華文細黑(Mac),微軟雅黑(Win)是這兩個平台的默認中文字體

  注意向下兼容:

  到此為止,我們的字體聲明已經很不錯了——如果你不必考慮還在使用舊版本操作系統的用戶的話。遺憾地是,中文市場還有大量的用戶在使用 Windows XP,宋體才是他們的主要中文字體。為了照顧到這些用戶,你可以為微軟雅黑增加一個 fallback:

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

  同樣地,你看到我們也為 Mac 系統使用了黑體作為 fallback。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM