如何设置 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等奇数字体显示,因为效果更好。

留下评论

电子邮件地址不会被公开。 必填项已用*标注