CSS font-family 順序

CSS font-family 的順序

https://www.ptt.cc/bbs/Web_Design/M.1279032453.A.80B.html

英文(編碼範圍較廣 e.g. Number)、中文、 正版(較少)、盜版(廣泛)、

相信大家都知道基本的用法是這樣:

    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 有 LiHei Pro(儷黑Pro,Mac上很受歡迎的預設中文字體)
        若裝了 office 也有 新細明體

    Win 有 新細明體 (似乎只有這個可以用)
                                    誰來告訴我微軟正黑體的「碧」bug改了沒?

    那這樣
    font-family: 'LiHei Pro', '新細明體', sans-serif;

    OSX上就會乖乖使用LiHei Pro
    (而且不會去使用醜掉的10.6預設字體HeitiTC)
    Win上就會使用新細明體

那中英文綜合的時候就是這樣

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

如果你想要有微軟正黑體的時候,就取代新細明體,那就...

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

以上就是 CSS font-family 的遊戲方式

results for ""

    No results matching ""