Mescoda's Blog

Instaread 的中文字体选择

2012-10-08

最近在做的 Instaread 是个在线阅读风格的东西。

Instaread 的正文文字 CSS 是这样的:


color: #333;
font: 18px/1.7 "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft YaHei",sans-serif;
letter-spacing: 0.5px;
text-align: justify;
word-wrap: break-word;

此外还提供了宋 / 黑体转换,简 / 繁转换和夜晚阅读模式的键盘快捷键。

以前看过很多理论资料说衬线比非衬线字体在阅读上效果更好,因为衬线本身可以使字体的特征更加突出,有时候即使文字的上 / 下部分模糊,仍然可以被识别。我个人在阅读长篇英文上的经验也告诉自己:“大段文字的阅读还是用衬线保险,Helvetica 这种一眼看上去棒极了,逐字读的时候就不一定好了”。

但是除了字体上的衬线和非衬线以外,阅读体验还与颜色、字号、行距、PPI、排版、屏幕种类、分辨率、系统渲染等其他许多因素有关。而且汉字区别与使用罗马字母的印欧语系,仅仅使用衬线和非衬线作为区分是简单甚至有些不负责任的(Windows 下其实也没有实际上的衬线中文简体,所谓的中易宋体只是点阵字体而已)。 根据自己在 Windows 和 Linux 下的实际体验,Instaread 默认采用大字号的黑体系列,同时也为看惯了 Windows 下中易宋体的同学提供了切换工具。

中易宋体(SimSun,就是 font-family 设为宋体\5b8b\4f53simsun 时 Windows 对应的字体)是 Windows 下长久以来唯一能作为正文阅读的字体,它的一个特点是在 18px 以下是点阵,18px 及以上是轮廓,只有 18px 及以上的中易宋体才能触发 Windows 的 Cleartype,渲染为亚像素的平滑状态,尽量还原衬线字体的风格,不然大字号的中易宋体根本没法看。( XP 默认没有开启 Cleartype,对于 Windows 用户来说,想要字体上的更好体验除了装 Mactype 之外其实就是开启 Cleartype 了)

简中黑体系列在各平台都有不同的字体:

Windows:Microsoft YaHei(微软雅黑)。是微软从 Vista 开始以 100刀 / 字的价格做了针对 ClearType 的 hinting 开发出来的字体。算是 Windows 下最好的简体字体了,也是 Instaread 的 Windows 默认字体。但是大段文字的排版下很有压迫感,需要增加字符间距。

Mac:从 OS X 10.6 开始携带了 Hiragino Sans GB(冬青黑体简体中文)。此外还有 STXihei(华文细黑)、STHeiti(华文黑体)和据说质量很差的 Hei。冬青黑体是是大日本 Screen 和北京汉仪合作开发的简体中文字体,衍生于日文字体 Hiragino Kaku Gothic 。比之前 Mac 下默认的华文黑体系列好很多,据说也是目前最好的简体中文字体 。10.6 之前一些果粉网页的 font-family 甚至会指定用 Hiragino Kaku Gothic Pro 或者 Hiragino Kaku Gothic 这些日文字体(尽管简体字不全,且汉字是日本标准)来提升体验。

Linux:WenQuanYi Zen Hei(文泉驿正黑)和 WenQuanYi Micro Hei(文泉驿微米黑)。均缘起于文泉驿项目,文泉驿微米黑据说是 Linux 下最好的简体中文字体。

以上是考虑兼容性的廉价解决方案,土豪们可以直接去justfont买信黑体用。

字体之外,颜色上使用了 #333,相对 #000 更加柔和。

字号上继承了我的大号趣味,也保证在中易宋体模式下触发轮廓字体还原衬线风格。

< >