如何保证网页的字体在各平台都尽量显示为最高质量的黑体？ - 知乎

如果受不了长篇分析，请直接看第三部分。
另外，请注意，此答案最初作于2011年底，随几经修订但总体上还是略有点过时。
如今其实我推荐有能力的开发者判断 UA 然后为不同的平台指定不同的 font-family，以取得最佳且最可靠的效果。
本文不探讨 IE 的那些 bug（比如在某些编码下无法正常处理 font-family fallback），请针对 Windows 的开发者小心。
= = =
我确实认为目前在常规像素密度的显示屏上还是必须用黑体才能保证正文字号的中文清晰易读。我不喜欢点阵宋体。（这里的「黑体」当然指的是字体的一类风格，并非 Windows 自带的那个自称「黑体」的「中易黑体（SimHei）」——中易黑体根本没法用作正文字体，顶多在标题等大字号场合利用一下。）
所以，一般来说，我们要保证自己的网页设计在各平台显示时都能用上各平台最佳的黑体。这需要一点分析。 一、各平台最佳正文字体现状：

  • Windows
    Windows 在 Vista 之前都以中易宋体（在 Windows 里显示名称为宋体，英文名 SimSun）为简体中文默认字体。它在正文字号时为点阵，尚可接受，但字号稍大就难以接受了。中易宋体没有粗体，它的西文部分也完全没法用。
    从 Vista 开始，微软提供了微软雅黑作为新的简体中文默认字体。这款字体跟上了时代，但褒贬不一。微软雅黑有粗体，西文部分达到了 Windows 的水准。在自己的网页设计中要不要用微软雅黑来显示正文——这是一大抉择。
    注意，决定用不用微软雅黑时要考虑到 pansz 说的 ClearType 问题：有一些 Windows 平台（包括一些 Windows XP）会因为种种原因拥有微软雅黑但却没开 ClearType，此时微软雅黑的效果很糟糕。
    Windows 的主要问题在于字体渲染技术依赖过多的人工干预，且 ClearType 的抗锯齿风格不适合汉字。近年来有 DirectWrite 新的抗锯齿风格加入，在大字号时字体渲染效果大有好转，但正文字号的改善有限，且各浏览器并未跟上 DirectWrite 的步伐，以致 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
    简中字体只有自带的华文黑体（黑体-简）可选。字体渲染风格与 OS X 类似。
  • GNU/Linux
    Linux 社区常用的简体中文介面字体似乎主要有文泉驿点阵宋体、文泉驿正黑和文泉驿微米黑，另有一些人会把 Windows 或 OS X 的字体拿去用。文泉驿点阵宋体类似 Windows 的中易宋体，而文泉驿正黑是在无自由黑体可用的情况下被迫制作的质量不太高的黑体。文泉驿微米黑是 Linux 社区现有的最佳简体中文介面字体，但它没有粗体。又因为文泉驿微米黑的质量也没有绝对优势，加之 Linux 各发行版的情况非常复杂，所以或许不指定字体最好。
    各 Linux 发行版默认的字体渲染效果参差不齐，成熟一些的（比如 Ubuntu）在某些方面会略强于 Windows。
  • Android
    自带支持汉字的 Droid Sans。文泉驿微米黑由 Droid Sans 衍生而来，主要扩展了它的中文部分（Droid Sans Fallback）。 二、所以，为网页设定字体时有以下目的须达成：
  • 对于 Windows：在中易宋体和微软雅黑之间二选一。粗体和较大字号的文本用微软雅黑。没有微软雅黑的系统会回退到中易宋体。
  • 对于 OS X：尽量使用冬青黑体简体中文。没有冬青黑体简体中文的系统会回退到华文黑体。
  • 对于 iOS：系统会自动使用华文黑体。
  • 对于 Linux：尽量使用文泉驿微米黑。没有文泉驿微米黑的系统会回退到别的字体。
  • 对于 Android：系统会自动使用 Droid Sans。 三、要达到以上目的，CSS 的 font-family 属性可以这么写：
  • 控制（为 Windows 选择微软雅黑，为 Linux 选择文泉驿微米黑）：
    ``` font-family: …, “Hiragino Sans GB”, “Microsoft YaHei”,
    1.        "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;

    1. 这个方案没法控制 Windows 到底用中易宋体还是微软雅黑，于是正文字号的效果或许见仁见智，但大字号时如果用的是中易宋体就非常难看了，所以可以为 Windows 把所有大字号文本的 CSS 改成「控制」方案。<br />注意：把冬青黑体放在这么前面会在某些情况下出问题，详见本答案第四部分。
    3. 不要轻易在 font-family 属性里写上中易宋体（SimSun）。因为如果你写了它，为了避免安装了 Office 的 OS X 调用它来显示，你就得把冬青黑体和华文黑体都列在它前面。而把中易宋体（SimSun）和华文黑体这样的系统默认字体写出来实在也没有什么必要。<br /> 不要轻易把中文网页的 font-family 写成以「serif」结尾，因为如果列出的字体都没有，系统会按照「serif」的指示去用归于 serif 的中文字体，这样不符合我们尽量使用黑体的原则。

    font-family: …, sans-serif;

    1. ——即完全由各平台自己决定使用什么中文字体。这是很常见的方案，豆瓣、知乎等网站都是如此。但因为这个方案和这个问答的初衷不符，所以我没有把它列入讨论范畴。      <br />**四、另外：**<br />厉向晨提出了一个**问题**：<br />如果把冬青黑体简体中文用作 font-family 的第一个中文字体，对于安装了冬青黑体简体中文的 Windows 用户来说，因为 Windows（至少在 DirectWrite 普及之前）对 PostScript 轮廓的字体渲染得很糟糕，效果会几乎没法阅读；而如果把微软雅黑放在冬青黑体简体中文前面，微软雅黑在 OS X 里的渲染效果起码可以接受，尽管并不舒适。<br />目前 Windows 里的情况比较乱，IE9+ 可以识别系统里安装的冬青黑体简体中文，而较新版本的 Firefox（@顾轶灵 说是 4+）能部分识别（似乎会分不清字重），其他浏览器/内核不行（必须用 PostScript name 才能识别）。所以，对于正文，最好针对不同的平台分别指定 font-family。<br /> 其实，如果你的网站可以判断 UA 来针对各平台提供不同的 CSS，那么以上的排序问题就没那么复杂了。根据以上分析，为各个平台指定你想要的字体就好。
    2. **应当注意的 WebKit 怪癖：**

    font-family: Georgia, sans-serif; ``` 就会用华文宋体显示中文。所以某些情况下你可能有必要加上「Heiti SC」。 五、拓展阅读：