如何在网页上显示各种操作系统上最优的字体列表

 

CSS 的 font-family 属性可以这么写（中文字体之前的「...」代表西文字体，根据自己的口味选择就好）：

• 控制（为 Windows 选择微软雅黑，为 Linux 选择文泉驿微米黑）：
  

  font-family: ..., "Hiragino Sans GB", "Microsoft YaHei",
               "WenQuanYi Micro Hei", sans-serif;
  

  为什么不把中易宋体（SimSun）、华文黑体（STHeiti［10.6 之前］或 Heiti SC［从 10.6 开始］）和 Droid Sans 写出来？因为它们是系统默认字体，以上字体都没有的话就会自动调用。除非你的用户中很多人的系统 locale 都不是中文，否则不必写出 STHeiti 之类（如果要写，请把它写在 Hiragino Sans GB 和 Microsoft YaHei 中间）。中易宋体（SimSun）尽管身为宋体，在 Windows 中却也是简体中文的默认 sans-serif 字体。
  注意：把冬青黑体放在这么前面会在某些情况下出问题，详见本答案第四部分。
• 自由（仅在 OS X 上尽量使用冬青黑体简体中文，放任其他平台使用默认字体）：
  

  font-family: ..., "Hiragino Sans GB", sans-serif;
  

  这个方案没法控制 Windows 到底用中易宋体还是微软雅黑，于是正文字号的效果或许见仁见智，但大字号时如果用的是中易宋体就非常难看了，所以可以为 Windows 把所有大字号文本的 CSS 改成「控制」方案。
  注意：把冬青黑体放在这么前面会在某些情况下出问题，详见本答案第四部分。

不要轻易在 font-family 属性里写上中易宋体（SimSun）。因为如果你写了它，为了避免安装了 Office 的 OS X 调用它来显示，你就得把冬青黑体和华文黑体都列在它前面。而把中易宋体（SimSun）和华文黑体这样的系统默认字体写出来实在也没有什么必要。
不要轻易把中文网页的 font-family 写成以「serif」结尾，因为如果列出的字体都没有，系统会按照「serif」的指示去用归于 serif 的中文字体，这样不符合我们尽量使用黑体的原则。

基于上面提到的这两个方案，还有各种中间形态可以选择。而 @崔凯 提到了另一个常见做法：

font-family: ..., sans-serif;

——即完全由各平台自己决定使用什么中文字体。这是很常见的方案，豆瓣、知乎等网站都是如此。但因为这个方案和这个问答的初衷不符，所以我没有把它列入讨论范畴。 

 

原文链接：https://www.zhihu.com/question/19911793/answer/13329819