1. 程式人生 > >CSS為英文和中文字型分別設定不同的字型

CSS為英文和中文字型分別設定不同的字型

font-family的呼叫方法:

div {
    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:假如存在這種字型的話).

所以,在定義字型的時候把英文的字型寫在前面把中文的寫在後面.這樣,系統就會自動按順序依次給字用字型,如果當前字型不支援文字,自動換用列表中的下一個字型

經過測試,IE9、IE9相容模式(相容IE8)、Chrome瀏覽器最新版本(34.0)、 Firefox瀏覽器最新版本(29.0)支援該font-family屬性;
但是某些版本的IE瀏覽器(IE7、IE8)無法實現該font-family屬性的要求,還會暴露出一些奇怪的 bug。如在這些版本的瀏覽器下使用中文字型(比如微軟雅黑),需要把該中文字型放到font-family屬性的首位,但是會導致英文字型也會使用該中文字型渲染。即在這些瀏覽器(IE7、IE8)下不支援在font-family屬性中為英文和中文字型分別使用不同的字型。