中文 Web 阅读体验

关于制造中文 Web 阅读体验过程中的一些思考结论。

1. 正文字体的尺寸应该使用固定的偶数像素单位,如 12px,14px,16px 等,一个例外情况就是 15px 像素也是相当不错的正文字体的尺寸。由于中文 Windows 操作系统及部分的 Linux 发行版使用的是像素字库,因此,这几个尺寸的字体在显示效果上最佳。而在 Mac OS X 上,因为 Mac OS X 使用的是矢量字库,则在各种尺寸下显示效果都不错。另外就是,Mac OS X 的中文矢量字库中内嵌了 12px 的像素字库。

2. blockquote、 ol、ul 等 HTML 元素内的文字应该在顶端和尾端留出至少 10px 的空白,在左端留出 20px 左右的空白,右端 10px 左右。在 CSS 语法中这些空白应该使用 margin 方式设置,padding 方式不提倡使用。padding 可以用来实现其他视觉效果。

3. 不要随意在正文和标题中使用拉丁等宽字体,除非是为了一些艺术上的用意。拉丁等宽字体应该用在和模拟打印制品或者程序源代码有关的场合。

4. 不要在任何地方强制指定使用任何的艺术中文字体,比如“魏碑”之类,这将在超过一半以上的计算机上,尤其是非 Windows 操作系统的计算机上不会显示出任何效果。

5. 应该对大部分文字的 line-height 属性进行强制指定,一个经验是,对于正文文字,line-height 数值可以指定为这些文字的 font-size 的像素值的 1.6 倍左右。如果是标题文字的话,1.3 倍左右。

6. 中文正文及标题中出现的标点符号应该使用全角方式输入。

7. 中文正文及标题中出现的英文及数字应该使用半角方式输入,并且在左右各留一个半角空格。如果这些这些半角英文及数字的左边或者右边紧接着任何的中文全角括号或者其他标点符号的话,则不需要加入半角空格。

8. 中文全角空格应该只在标题处使用。此外,在 Web 上的文字的正文的段落开头是否使用两个全角空格是个人喜好问题,反正我不喜欢用,因为这些全角空格有些浪费存储空间,且对快速扫描式的阅读没有太大帮助。

9. 在 Web 上的文字,是被人们用眼睛来扫描的,绝大部分都不会被人仔细阅读。

10. 中文字体的粗体和斜体显示效果不推荐使用。在大部分非 Windows 操作系统上,这些效果都不被字库或者浏览器支持。而在 Windows 操作系统上,这些效果也不够理想。粗体中文显示效果在 Windows 操作系统上会让部分笔画连接在一起而使得文字难以被辨认,而斜体中文显示效果则会使得部分笔画消失,也非常难以被辨认。如果一定要使用此二种效果,则要么通过 CSS 的 font-weight 方式指定,要么通过 strong 和 em 标签,而不要使用 b 和 i 标签。

11. 中文的段落与段落之间应该留出一个完整的空行。即每个段落使用一对闭合的 p 标签在不加 CSS 时候的效果,或者是使用两个 br 标签时产生的效果。注意,这个空行的高度会受到 line-height 的影响,因此不要把 line-height 设置为太高的数值,否则将使得两个段落之前的视觉联系减弱,导致影响阅读时候的思路连贯。

12. 如果文字是要被通过 RSS 输出的,则可以考虑在其中加入一份内嵌样式表,对于 ol、ul、blockquote 等元素的样式尤其需要控制。这样可以保证即使文字被显示在其他网站,其样式也依然可以保持统一,如果没有被聚合器过滤 HTML 标签的话。

以上这些,是我在写任何 HTML 文档时候的指导原则。比如,V2EX 的所有文档及 UBB 转换器都尽量符合这些原则。