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