CSS font-family的順序

2016年09月07日 13時51分 wanglinqiang整理

相信你們都知道基本的用法是這樣：

font-family:font1,font2,serif;

系統有font1就先用font1
若是使用者的系統字體沒有font1，就看他有沒有font2
若是都沒有，就改用瀏覽器指定的serif字體

如此一來能夠透過技巧指定中英文不一樣字體，例

font-family:Arial,'新細明體',sans-serif;

遇到英文的時候，會先看Arial能不能用
因為能夠用因此英文會先套用Arial字體
遇到中文的時候，會先看Arial能不能用
因為Arial沒有中文字不能用，因此就再看下一個'新細明體'
由於'新細明體'字體裡面有中文能夠用，因此中文就套用了'新細明體'
阿萬一都統統沒有，就以瀏覽器指定的sans-serif字體為主
若是sans-serif字體沒有中文字
就會去找系統內的fallback順序找到中文字體

若是你反過來寫就沒有這個效果，例

font-family:'新細明體',Arial,sans-serif;

中英文均可以在'新細明體'裡面找到
因此中英文所有都會用'新細明體'來顯示
萬一系統沒有'新細明體'
英文會先用Arial,中文會去找瀏覽器指定的sans-serif字體
若是sans-serif字體沒有中文字
就會去找系統內的fallback順序找到中文字體

不一樣的系統，想指定不一樣的字體，也可如法炮製
OSX有Helvetica也有Arial
Win有Arial
然後我們又知道Arial其實是Helvetica的山寨版
當然要優先使用Helvetica

font-family:Helvetica,Arila,sans-serif;

這樣英文字體就會先使用Helvetica
萬一系統沒有Helvetica，才使用Arial
若是你反過來寫...

font-family:Arial,Helvetica,sans-serif;

你也知道這樣兩套系統都有Arial
就所有都會使用Arial了阿
（當然是指使用者沒有本身刪除Arial又去安裝Helvetica的狀況）

同樣能夠類推中文的狀況:
OSX有LiHeiPro（儷黑Pro，Mac上很受歡迎的預設中文字體）
若裝了office也有新細明體
Win有新細明體（彷佛只有這個能夠用）
誰來告訴我微軟正黑體的「碧」bug改了沒？
那這樣

font-family:'LiHeiPro','新細明體',sans-serif;

OSX上就會乖乖使用LiHeiPro
（並且不會去使用醜掉的10.6預設字體HeitiTC）
Win上就會使用新細明體
那中英文綜合的時候就是這樣

font-family:Helvetica,Arial,'LiHeiPro','新細明體',sans-serif;

若是你想要有微軟正黑體的時候，就取代新細明體，那就...

font-family:Helvetica,Arial,'LiHeiPro','微軟正黑體','新細明體',sans-serif;

以上就是CSSfont-family的遊戲方式