Jade Dungeon

字体渲染

主要渲染手段

栅格化、黑白渲染、灰度渲染(Grayscale)、次像素渲染。

字体格式

  • TrueType字体:EOT.tff文件。
  • PostScript字体:.otf文件
  • WOFF文件可包含其中任意一种字体格式。

在windows平台上,字体格式对渲染有重大影响。PostScript字体和TrueType字体之间就存在明显差别。

TrueType 和 PostScript 区别在于在描绘曲线时所用有的数学方法不一样,实现了不同的光栅器(rasterizers)。 只有需要编辑字形的时,字体设计人员才会觉察到两者的区别。

另一个更重要的区别是所采用的字体微调方法。 PostScript 字体包含字母组成的各类要素的位置抽象信息,而TrueType字体则包含了详细的底层指令,直接控制渲染过程。

然而两种渲染方式的实际差异并不在于概念上的区别,而是源自微软只对TrueType字体应用新渲染引擎的决定。

Windows平台渲染方式

在Windows上,微调极为重要,尤其是对TrueType字体而言(这是IE6-IE8唯一接受的Web字体格式)。 除此之外,选择TrueType还是选择PostScript字体格式也会对渲染结果产生重大影响。 除了小号微调字体外,PostScript格式在渲染效果方面不逊于甚至由于TrueType格式, 另外字体的制作过程也要简单。

尽管DirectWrite让Windows上的字体渲染效果更加愉悦,但是提供微调良好的字体仍有必要。

GDI是经典的Window应用程序接口。

GDI Grayscale

灰度渲染。尽管渲染效果比不上Mac OS采用的次像素渲染技术,但字母在大尺寸下效果不错,边缘很平滑。

在Windows XP 上,许多浏览器采用灰度模式渲染文本的。

在Windows老式的灰度模式下,完全未做微调的字体效果出奇的好。 因为字体未通过微调使自身与全像素「对齐」,另外栅格器也未作强制处理, 其效果很接近iOS上的字体渲染。遗憾的是,目前来看未微调字体不宜使用。

GDI ClearType

微软水平方向上吸取了次像素渲染技术的优点,但是却彻底放弃了对字体垂直方向上平滑度的改进。 因此ClearType实际上是次像素和黑白渲软技术的混合。

结果字体轮廓线上出现锯齿,在大尺寸下,这点尤其明显。 曲线顶部和底部的锯齿看起来非常不舒服,但是无法避免——即便是最好的字体微调也无法让其消失。

对于大尺寸的字体,ClearType在渲染质量是一种退步。水平方向上精确度带来的好处并不明显, 而粗糙的渲染轮廓却毁了整体的效果。

TureType

GDI-ClearType 默认开启,只运用在TrueType类的Web字体上。

GDI-ClrearType极度依赖良好的微调。水平方向上的笔画需要通过微调精确定义, 不然笔画的宽度可能会恰当。在大尺寸情况下,微调也极为重要。 未微调字体在轮廓线未正确对齐像素网格的地方会突出一些「结疤」出来。

PostScript

只能通过灰度渲染显示的。不同于流行的GDI-ClearType模式,这种渲染模式使得字体轮廓平滑过度。 与TrueType字体的微调不同,PostScript字体的微调要简单,甚至可以自动完成。

DirectWrite

在GDI技术的继任者DirectWrite中,微软为ClearType增加了垂直方向上平滑度。 新的渲染模式(目前IE9在使用)在所有尺寸下都可提供平滑而精确的渲染。 它与Mac OS的主要区别是Windows的DirectWrite仍试图将轮廓与全像素高度(full pixel heights)对齐。 字体微调得当的话,此举可以获得更好的渲染效果。

另外,DirectWrite可以进行次像素定位(subpixel positioning), 从而使得字符间的间隙与设计的完全一致,另外该技术改善了字体纹理总体的匀称度。

TureType

支持次像素渲染。

在DirectWrite模式下,未微调的PostScript和TrueType这两种Web字体的渲染效果几乎完全相同。 这两种格式的文本字体仍需要良好的微调才可确保笔画的清晰和一致性。 屏显字体甚至可以侥幸避免未微调的不良后果,因为在大尺寸下,微调与否区别不大。

PostScript

支持次像素渲染,不过与TrueType字体渲染还是有些不一样: 为了更能真实的反映笔画粗细,它使用了更多的灰色像素。

该技术做了相当多的权衡,非常接近Mac OS的渲染效果。

在DirectWrite模式下,未微调的PostScript和TrueType这两种Web字体的渲染效果几乎完全相同。 这两种格式的文本字体仍需要良好的微调才可确保笔画的清晰和一致性。 屏显字体甚至可以侥幸避免未微调的不良后果,因为在大尺寸下,微调与否区别不大。

MAC OS X 的渲染方式

在Mac OS系统上,所有浏览器使用的是Quartz渲染引擎。TrueType和PostScript字体都是以同样的方式渲染的, 因此字体微调(hinting)被忽略了,而这正是两类字体在概念上最大的差别。

Mac OS的次像素渲染技术非常牢靠,因此这是我们最不用担心的一个平台。 栅格器不会试图理解构成字体的笔画及特征。因为万物都可用暗像素来呈现。 字母形状不会解读,因而也就不会出现曲解的情况来。

Quartz渲染引擎非常可靠,因为它不擅作主张。 另外苹果似乎也会应用一些精妙的自动化措施增强渲染效果,但是这类自增强的技术没有文档说明, 也完全超出我们的控制。

不过在某些情况下,这类技术也会导致一些不理想的效果。比如大号的T因为其理论的高度不是全像素值, 因此在字母顶部有一行模糊的灰线。而且Mac OS也不会强迫字母对齐。这点不受字体创作者控制。 不过,这类模糊只会在特定的字体大小下才会发生。因此一般只需选择稍不同的字体大小即避免此问题。 稍微试错后,我们便可找到看起来舒服而又清晰的字体大小。

在Mac 上另外碰到的一个难以控制的现象是,字体会渲染的更重些。在文本字体大小下, 这点差异尤其明显。同样的字体在Mac OS上看起来有点浓稠,而在Windows上则看起要清淡些。

iOS 的渲染方式

iOS上的字体渲染遵循与Mac OS 一样的原理——两者之间的主要区别就是iOS目前尚未运用次像素渲染技术。 原因可能是当设备旋转后,系统需要重新运算并渲染结果。因为次像素的排列方向发生变化了, 另外苹果想尽可能较少CPU的使用。