关于中文字体的一点个人浅见，寻找适合 Web 阅读的中文字体。评论互动： http://lepture.com/zh/2014/chinese-fonts-and-yue-css
我时常更新自己的博客程序，也时常更新自己的博客主题。偏右言：「世上有两种前端工程师，写博客的，和写博客的。」我之谓也。我的博客主题一直保持着简洁的样式，保持着我认为适合阅读的文字排版。
中文阅读上，我以为最大的问题便是字体。不像英文，使用 Web Fonts 的代价相当低廉，中文因为文字量大的原因，整个字体文件偏大，暂不适合使用 Web Fonts。在这样的情形下，我们只能尽量利用作业系统自身的字体了。
Mac
Mac 上默认的中文字体是华文黑体（STHeiti）与华文宋体，我个人认为质量是不错的。纸质书的印刷，普遍使用的是宋体，然而在现在的显示器上，宋体的表现并不令人满意。
宋体的结构相比于黑体要复杂许多，比如横线起笔处微小的回钩，横竖撇捺点钩都没有那么简单。这些细腻的处理在现在的显示器上都无法完美地体现，也许等到 Retina 普及后，宋体才能重拾其在纸质书的光辉。
而黑体则不一样，结构简洁，形体匀称，合适在显示器上阅读。所以目前我的选择是黑体。Mac 上还有一款赞誉颇多的黑体，冬青黑体（Hiragino Sans GB）。
华文黑体
冬青黑体
我个人以为两者都还不错，冬青黑体整体看来更为饱满，偏扁平，而华文黑体则偏瘦一点，比如你看两者的「口」字。我个人随大流，选择了赞誉颇多的冬青黑体。
Windows
因为我个人一直使用的是 Mac，对视窗系统没有太多了解，只知道中易宋体与微软雅黑。所以只能对这两者做对比。
微软雅黑
也许只是个人原因，微软雅黑看起来不够圆润，甚至有锯齿感。当然，这与 Windows 的字体渲染有关，非微软雅黑字体之过。但是也有人觉得 Windows 上的微软雅黑比 Mac 上的冬青黑体更好，嫌弃 Mac 的字体渲染太模糊。我个人认为 16px 的中易宋体在 Windows 上是更好的选择。
中易宋体
Windows 的字体渲染偏锐利，微软雅黑的显示就有点尴尬，但是中易宋体是点阵字体，正好利用到了 Windows 的字体渲染优势。我们看到中易宋体的内容非常清晰悦目。
中易宋体
但是受限于点阵字体，一旦到 18px 时，渲染效果就没法看了。所以使用中易宋体时就必须保证字体大小在 18px 以下。
那么，在 Windows 上，我的选择是 16px 的中易宋体。但是我并非实际使用者，有 Windows 使用者反馈说微软雅黑挺好的。还是希望能有更多的 Windows 使用者的反馈。
Linux
在使用 Mac 之前，我一直使用的是 Ubuntu，所有的经验也都停留在那一时期。也不知道过了这许多年，Linux 上的字体渲染发展得如何了。
Linux 上我的选择是 18px 的 文泉驿微米黑 Droid Sans Fallback。因为 Linux 用户自己喜欢折腾，我的选择也许无关痛痒。
The Code
这些经验最终汇集到了 yue.css 这个样式库。尤其是对 Windows 的处理，反反覆覆，时而会把微软雅黑添加进来，时而又移出。到写作此文时，字体样式便成了：
.yue {
font: 400 18px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
}
.windows .yue {
font-size: 16px;
font-family: "Georgia", "SimSun", sans-serif;
}
Windows 使用 16px 是为了兼容 Windows XP。在 XP 上，没有微软雅黑只有中易宋体，在这种情况下会 Fallback 到中易宋体，而 18px 会导致字体变形。你可能需要一句 JavaScript 来添加 .windows 的 class：
if(/windows/i.test(navigator.userAgent)){
document.getElementsByTagName('html')[0].className += ' windows'
}
至于 16px，我个人以为偏小。但是还有许多网站在使用 14px，甚至于还有 12px 的。以现在显示器的分辨率，14px 的文字阅读起来就有点吃力了。当然，也有可能我高估了高分屏的普及率了。
Criticism
- 豆瓣的日志影评书评等内容皆是 12px 的，必须点名批评一下。现在已经是 2014 年了，这个字体大小真的看起来很累。
- 知乎的内容是 13px 的，比起 12px 也好不了多少。不过专栏字体大小有 16px 了，还算不错。
- 简书用 18px 的宋体，这个在 Windows 下是没有办法忍受的。但是最不能忍受的还是楷体的标题。
yue.css
对于文字排版，我并没有专业的素养。愚之所言，不过个人经验罢了。最后这些经验汇集成了样式集 yue.css。
yue.css 不是一个样式重置(reset)，不会影响到其它标签的样式。你所需要的只是给内容区域加上 .yue 的 class。简洁实用，目前用于我的博客，阅乎，当然还有别的朋友在用。
如果你对文字排版有兴趣，可以使用 yue.css。如果你对 yue.css 有意见，也欢迎反馈给我。
注：本文只关注字体，稍微关注大小，但是赏心的文字排版还包括行高颜色等。
网友评论