网页在各平台都显示为最高质量的黑体的方法

内容摘要
我确实认为在目前常规的显示屏上(台式机、笔记本电脑、iPad……)还是必须用黑体才能保证正文字号的中文清晰易读。(这里的「黑体」当然指的是字体的一
文章正文

我确实认为在目前常规的显示屏上(台式机、电脑、iPad……)还是必须用黑体才能保证正文字号的中文清晰易读。(这里的「黑体」当然指的是字体的一类风格,并非 Windows 自带的那个自称「黑体」的「中易黑体(SimHei)」,中易黑体没法用作正文字体,顶多在标题等大字号场所可以利用一下)。我不喜欢点阵宋体。 

所以,一般来说,我们确实需要保证自己的网页设计在各平台显示时都能用上各平台最佳的黑体。这需要一点分析,以及对 CSS 的 font-family 属性的一点了解。 

一、各平台最佳正文字体现状: 

  • Windows 
    Windows 在 Vista 之前都以中易宋体(在 Windows 里显示为宋体,英文名是 SimSun)为简体中文默认字体,正文字号时为点阵字体,尚可接受,但字号稍大就奇丑无比。中易宋体没有粗体,它的西文部分也完全没法用。 
    从 Vista 开始,微软提供了微软雅黑作为新的简体中文默认字体,这款字体跟上了时代,但褒贬不一。微软雅黑有粗体,西文部分达到了 Windows 的水准。自己的网页设计中要不要用微软雅黑来显示正文——这是一大抉择。注意,决定用不用微软雅黑时要考虑到 @pansz 说的 ClearType 问题:有一些 Windows 平台(包括一些 Windows XP)会因为种种原因拥有微软雅黑但却没开 ClearType,此时微软雅黑的效果是很糟糕的。 
    Windows 的主要问题在于字体渲染技术极其落后,所以字体渲染效果非常受限。
  • Mac OS X 
    OS X 一直用华文黑体作简体中文默认字体,这个字体族有常规体和粗体,西文部分很差劲(和中易宋体西文差的原因倒还不太一样)。 
    从 OS X 10.6 开始,系统自带了冬青黑体简体中文(该字体在 10.7 以前没有中文名,叫作Hiragino Sans GB)。这款字体至今没有成为系统的简体中文默认字体,但它是目前 OS X 最好的简体中文字体。 
    OS X 的字体渲染技术显然是目前所有操作系统中最佳的。 
    另外,OS X 还有一款叫 Hei Regular(family name 是「Hei」)的老旧字体——绝对不要再用它了,除非你知道自己在干什么。
  • iOS 
    自带华文黑体。
  • GNU/Linux 
    Linux 社区常用的简体中文介面字体似乎主要有文泉驿点阵宋体、文泉驿正黑和文泉驿微米黑,另有一些人把 Windows 或 OS X 的字体复制过去用。文泉驿点阵宋体类似于 Windows 的中易宋体,而文泉驿正黑是在无自由黑体可用的情况下被迫制作的质量不太高的黑体。文泉驿微米黑是Linux 社区现有的最佳简体中文界面字体,但它没有粗体。但因为文泉驿微米黑的质量也没有绝对优势,加之 Linux 各发行版的情况非常混乱,所以或许不指定字体最好。 
    各 Linux 发行版默认的字体渲染效果参差不齐,成熟一些的(比如 Ubuntu)在某些方面会略强于 Windows。
  • Android 
    自带 Droid Sans。文泉驿微米黑由 Droid Sans 衍生而来,主要扩展了它的中文部分(Droid Sans Fallback)。

二、所以,为网页设定字体时有以下目的需要达成: 

  • 对于 Windows:在中易宋体和微软雅黑之间二选一,加粗和较大字号的文本使用微软雅黑。没有微软雅黑的系统会 fallback 到中易宋体。
  • 对于 OS X:尽量使用冬青黑体简体中文。没有冬青黑体简体中文的系统会 fallback 到华文黑体。
  • 对于 iOS:系统会自动使用华文黑体。
  • 对于 Linux:尽量使用文泉驿微米黑。没有文泉驿微米黑的系统会 fallback 到别的字体。
  • 对于 Android:系统会自动使用 Droid Sans。

三、要达到以上目的,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 字体。
    注意:把冬青黑体简体中文(Hiragino Sans GB)放在这么前面会在某些情况下出问题,详见第四部分。
  • 自由(仅在 OS X 上尽量使用冬青黑体简体中文,放任其他平台使用默认字体): 
    font-family: … "Hiragino Sans GB", sans-serif; 
    这个方案没法控制 Windows 到底用中易宋体还是微软雅黑,于是正文字号的效果或许见仁见智,但大字号时如果用的是中易宋体就非常难看了,所以可以为 Windows 把所有大字号文本的 CSS改成「最强控制」的那个方案。
    注意:把冬青黑体简体中文(Hiragino Sans GB)放在这么前面会在某些情况下出问题,详见第四部分。

不要轻易在 font-family 属性里写上中易宋体(SimSun)。因为如果你写了它,为了避免安装了 Office 的 OS X 调用它来显示,你就得把冬青黑体简体中文和华文黑体都列在它前面。而把中易宋体(SimSun)和华文黑体这样的系统默认字体写出来实在是没有必要。 
不要轻易把中文网页的 font-family 写成以「serif」结尾,因为如果列出的字体都没有,系统会按照「serif」的指示去用归于 serif 的中文字体——比如 OS X 会用华文宋体,太细了,效果实在不好。 

基于上面提到的这两个方案,还有各种中间形态可以选择。而 @崔凯 提到了另一个常见方案:font-family: … sans-serif; ——即完全由各平台自己决定使用什么中文字体。这是很常见的方案,其实也是最成熟的方案,豆瓣、知乎等网站都是如此。但因为这个方案和这个问答的初衷不符,所以我没有把它列入讨论范畴。 

四、另外: 

@厉向晨 提出了一个重大问题:如果把冬青黑体简体中文用作 font-family 的第一个中文字体,对于安装了冬青黑体简体中文的 Windows 用户来说,因为 Windows 对 PostScript 轮廓的字体渲染得很糟糕,效果会几乎没法阅读;而如果把微软雅黑放在冬青黑体简体中文前面,微软雅黑在 OS X 里的渲染效果起码可以接受。

目前 Windows 里的情况比较乱,IE9+ 可以识别系统里安装的冬青黑体简体中文,而较新版本的 Firefox(@顾轶灵 说是 4+)能部分识别(似乎会分不清字重),其他浏览器/内核不行(必须用 PostScript name 才能识别)。所以,对于正文,最好针对不同的平台分别指定 font-family;对于大字号标题(尤其粗体)倒不必担心。

其实,如果你的网站可以判断 UA 来针对各平台提供不同的 CSS,那么以上的排序问题就没那么复杂了。根据以上分析,为各个平台指定你想要的字体就好。

应当注意的 WebKit 怪癖:如果你将西文字体设置为 Georgia 之类的 serif 字体(即,与列表后面的 sans-serif 中文字体不属一类),且 WebKit 内核的 UA(Mac OS X 的 Safari 是个典型)找不到你指定的任何中文字体,可能会导致 UA 用系统默认的 serif 中文字体。比如,如果 Mac OS X 的 Safari 遇到了「font-family: Georgia, , sans-serif;」,就会用华文宋体显示中文。所以某些情况下你可能有必要加上「STHeiti」。

代码注释
[!--zhushi--]

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!