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