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的遊戲方式