如何设置 font-family 比较好？

针对常见的中文英文和日文，如果所有的浏览器都能够正确处理中文的话，理论上的最简单的设置应该是：

font-family: sans-serif。

这行代码设置所有字体为系统默认的无称线字体。如果在各种操作系统和浏览器都做对的情况下，它应该对中英文使用默认的无称线字体。即大多数情况下英文显示『Arial』或『Helvatica』，中文显示『黑体』或『微软雅黑』，日文显示『哥特体』。当然，也可以设置font-family: serif。那么相应的就是『Times』、『宋体』和『明朝』。很可惜这项设置只能在Mac和Windows8下正确显示。在其它Windows下其实是无效的。原因如下：

• 除了Win8以外的Windows都会错误地使用宋体（称线字体）显示。（其实也没问题，只是那些想用雅黑显示的网页就没戏了）
• Windows XP及以前的操作系统上黑体显示的中文字非常难看不便阅读。
  

分析开始之前

为了使问题简化，在此就讨论的条件和范围说明一下：

注1：貌似某些新版本的浏览器能够在Windows上正确分辨中文的称线和无称线字体了。
注2：Win8上的IE10似乎已经修正了对无称线字体的显示问题。但是不知道Win7的IE10会怎样。
注3：不讨论Windows和Mac以外的操作系统了。
注4：不讨论一个网页内标题和正文使用不同中文字体的情况。
注5：不讨论中文、日文和拉丁字母以外的字符。
注6：不讨论用户在浏览器的设置中中强行设置字体的情况。
注7：不讨论称线和无称线字体以外的情况，如等宽字体。（因为对中文实际使无效的）

分析开始

在给出答案前，先说各种字体的在各种操作系统上现象：宋体：

• 在Windows操作系统上显示良好。但是仅限于12像素和14像素。超出14像素的字基本就会出现字不够方正，锯齿明显的现象。
• 在Mac上各种字号都可以很好的显示。这是因为Mac上针对字体所做的反锯齿效果做的比较好。

黑体或微软雅黑：黑体和微软雅黑都属于无称线字体。

• Windows Vista，Windows 7和Windows 8上在各种字号下显示良好。但是仅就阅读来售，雅黑在Windows下不大适合做大段阅读，因为会出现明显的字体歪歪扭扭的现象。雅黑比较适合做UI字体，比如按钮、导航、菜单。大号字体下用以显示标题也不错。因此我们看到很多新网站都开始使用雅黑了。
• Mac：黑体没有任何问题。虽然有些人号称看苹果上的黑体字很不习惯。但是个人觉得还是最适合阅读的字体。而且也适合做UI字体。
  
• Windows XP及以前的Windows：这里就比较复杂了。因为：
  1) Windows XP原生是不带微软雅黑的。
  2) 加装Office 2007后会加装微软雅黑。
  3) Windows XP的Clear Type做的非常不好，导致雅黑在Windows XP上的显示效果基本无法阅读。（如下面对点点网的截屏）
  

所以，很多网站所喜欢的 把雅黑设置为第一顺位的做法就出问题了，

font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; 

它会导致：

• 网站在装了Office 2007+的Windows XP基本属于不可用状态（如上面对点点网的截屏）。
• 装了Office的Mac上显示为雅黑（而不是Mac上显示效果最佳的黑体）。

我的答案

说是『我的答案』，因为实际上使用 font-family: sans-serif; 已经能解决所有的兼容性问题了。唯一的缺憾是在目前的条件下，无法使用微软雅黑。为了发挥雅黑的好处，同时解决兼容性问题，我在服务器端针对各种不同的操作系统做了不同的判断。如下：

• Windows XP及以前版本的Windows
  font-family: Arial, 宋体, sans-serif;
  
• Windows Vista和Windows 7
  font-family: 'Microsoft Yahei', sans-serif; Sorry，英文就无法设置字体了，因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。
  
  
• Mac及其它操作系统
  font-family: sans-serif;
  

• Windows XP及以前版本的Windows

font-family: Arial, 宋体, sans-serif; 

• Windows Vista和Windows 7

font-family: 'Microsoft Yahei', sans-serif; 
Sorry，英文就无法设置字体了，因为中文字体都包含了英文字体。好在雅黑显示英文还凑合。

• Mac及其它操作系统

font-family: sans-serif; 

• Windows Vista和Windows 7

font-family: 'Microsoft Yahei', sans-serif; 

其实这还不够好，因为在Windows下，正文使用宋体显示比较合适。我的下一步的计划是：

1. 针对Windows下的正文使用宋体。
   
2. 针对雅黑字体，用13px和15px等奇数字体显示，因为效果更好。