[閒聊] CSS font-family 順序

看板Web_Design作者evenwu (EvenWu)時間14年前 (2010/07/13 22:47)推噓4(4推 0噓 2→)

留言6則, 4人參與討論串1/2 (看更多)

CSS font-family 的順序，相信大家都知道基本的用法是這樣： 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 的遊戲方式 -- 明天週三（7/14）的RGBA聚會照常舉行沒來過或忘記來的朋友可以看看介紹 http://rgba.tumblr.com/post/356284580/about 我會帶這本火熱的html5新書給大家翻翻 http://www.flickr.com/photos/1pxphoto/4777289742/in/photostream/lightbox/ -- RGBA網頁設計師聚會 — 一群網頁設計師發起的交流聚會，隨意聊天問問題的好地方 http://rgba.tumblr.com/post/356284580/about EvenDesign意門設計 — 專門提供網站開發者跨平台、能安心整合的標準規格網頁設計 http://evendesign.tw -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.32.77.168

推

akou

07/13 23:58, , 1^F

07/13 23:58, 1^F

推

darKyle

07/14 13:41, , 2^F

07/14 13:41, 2^F

→

darKyle

07/14 13:42, , 3^F

07/14 13:42, 3^F