做好中文排版

《做好中文排版》是 2015 年 4 月份在团队的内部分享会上我整理的一篇关于前端中文字体版式的基础总结,主要根据中文排版需求做了一点摘要和整理,然后做了一个适应当时小米网的前端中文排版实践。希望能对前端初学者提供些许帮助。里面的内容现在看可能有些陈旧,很多代码或许已经不是最佳实践,仅供参考。



在线地址:http://lightcss.com/ppt/2015/typo/

下面的注释需要结合 PPT 里面的大纲看。

从《中文排版需求》说起

  1. W3C 编辑草案《中文排版需求》初稿于2015年3月28日发布,制订和整理了中文排版相关需求,向排版引擎开发者及数字出版的从业者提供参考。
  2. W3C i18n 小组发布的第一份完整语言规范是「日文排版需求」,共耗时 5 年时间撰写,于 2008 年发布。大幅促成了方块字尤其是竖排的实现,一直以来没有正式标准的中文排版也默认参考了这个标准。之后 i18n 又陆续组织工作小组发布「谚文排版需求」和「印度语文排版需求」等。
    制订中文规范最早由台湾人提出,《中文排版需求》也由台湾人主导。从标点位置、避头点等陆陆续续完善需求。但因排版一直不受重视且 W3C 会费高昂,制定者一直没有把需求制定的事落实好,直到近期才完成,目前的状态还只是一份草稿,之后还要给 W3C i18n 小组不断审查修订才能演变成一份标准。据说这帮人将来还要负责增加蒙古文、藏文等排版需求。
  3. i18n 是由单词 Internationalization 缩减而来,因为 i 和 n 中间的字母数是 18(好随意的命名)。

《中文排版需求》摘要

  1. 方针:原则上中文排版使用的汉字与标点比例皆为 1:1 正方形,并将其无缝隙并列排成版面。
  2. 中文排版常用字体:通常作为前端来说,最常接触到的是非衬线字体(sans-serif)和衬线字体(serif)。设置字体族时避免混淆使用。
  3. 横排与竖排:直排文字由上而下,行由右向左排列,从左往右翻页。横排文字由左而右,行由上向下排列,从右往左翻页。直排遇到西文、数字混排时:
    • 如果单一字母或数字,采用与汉字相同书写方向;
    • 2-3 位时并列横排处理,常见于「3.0」、「A+」、「2B」等;
    • 如果单词或语句,文字顺时针旋转 90 度。
  4. 符号、禁则处理及中英文混排见 PPT。
  5. 段落:处理方式很多,抽字抽行或塞字塞行等,最合理实现是增减字。

中文排版前端最佳实践

  1. 总则:尽量用黑体,使用 em 而不是 px 控制排版。
  2. 字体渲染机制:段落内文字优先使用 Helvetica 字体,没有则使用 Arial,如果都找不到则使用浏览器默认的非衬线字体。而精确到「jumps」单词,如果浏览器找不到「Helvetica Bold」,则会跳去寻找「Arial Bold」字体。
  3. 中文字体声明:根据上面的渲染逻辑,优先写英文字体,优先写最好看的字体,同时避免前面说的字体族混合使用。
    • 中文没有斜体,不要用;
    • 避免全局使用 -webkit-font-smoothing
  4. 避免使用竖排。
  5. 优先使用两侧对齐替代左对齐。
  6. 使用空格分割中西文(尽管这并不是一个完美的方案)。
  7. 不要调整中文的字间距:字间距过大时,难以辨识文字是横排还是竖排。
  8. 段落:网页排版不需要段首缩进。另外多段间距,也可以使用 p:not(:last-child) { margin-bottom: 1em; } 的方式。

内容有点笼统,当时脱稿讲的,现在只能回想起这么多啦。

-- EOF --

此条目发表在 前端开发 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

做好中文排版》有 2 条评论

  1. TanApok 说:

    MingLiU 字体很好看。
    与排版相比,中文还缺少好看的字体。把字体的选择交给浏览器是很可怕的,我没法想象自己做的东西在不同的设备中的显示方式会不一样。所以我喜欢苹果官网,它自带字体,所以在各种设备上的展示都一样。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

− 4 = 5