对计算机字体渲染的一些研究

今天中午我雪和我偶然的说起我在Win8截的图中字体渲染方式似乎和他的Win10不同，想到我们都从来没有在意过计算机字体渲染方面的学问，我粗略的去Google和Wikipedia翻了一番，将补到的一些基础知识记录一下。

1. 点阵字体(Dot-matrix-fonts)

在计算机发展早期没有图形界面或图形界面功能简陋之时，字体格式全是点阵字体。所谓点阵字体或更符合其特征的称呼为位图字体(Bitmap fonts)，每个字形都以一组二维像素信息表示。点阵字体的原理非常简单，对于每一种存在的字号，都存储其特定字符特定字号对应的位图信息，需要时直接输出出来即可。
其实在现代Windows操作系统中，我们还是可以找到点阵字体的身影。
打开一个cmd，右键标题栏属性，在字体选项卡中我们可以看到默认输出字体就是点阵字体，而且当我们切换字体大小时，我们可以看到字体的样子发生了巨大的改变，看上去根本就不像同一种字体。这恰恰证明了点阵字体是预先设计好直接输出而非即时渲染的特点。

点阵字体的优点显而易见，由于无需即时渲染，所以输出点阵字体的资源消耗非常小。并且因为输出的就是预先设计好在这个特定字号的特定字符，点阵字体的输出质量仅仅取决于设计时的质量，所以其实点阵字体的表现非常好。

2. 矢量字体(Vector Fonts)

由于图形界面的飞速发展和人们对随心随欲放大缩小字号的需要，设计出来什么字号就只能用什么字号的点阵字体显然并不能满足需求。并且，英文字母是只有26个，但是当CJK字库加入进来后，维护各种各样字体各种各样大小的中文日文韩文字号显然并不切实际。于是矢量字体或
称为轮廓字体(Outline Fonts)引入了进来。矢量字体使用贝济埃曲线描述轮廓，当字体被使用时，计算机即时渲染出对应字号的字体。
矢量字体最典型的格式有PostScript，TrueType和OpenType。TrueType由Apple和微软参与开发，由于Windows和Mac的普及，是当今使用最多的字体格式。

在我经常使用的Debian桌面环境Xfce4的设置中，字体选项中有这些设置，后面我会调节这些设置用来举例。
，

2.1. 最简单的光栅化(Font rasterization)

我们知道，一个显示器有其对应的分辨率。分辨率是屏幕图像的精密度，是指显示器所能显示的像素有多少。比如一个常见的1366x768的笔记本屏幕，它可以显示出1366x768个像素，每个像素是一个小格子，这个格子里只能是一种颜色。这就带来了矢量字体也是计算机图形学中最普遍的问题：失真。
当你放大一个字体时，边缘必然是有锯齿的，这些锯齿的产生就是因为这个格子里只能是同一种颜色，放大后看到了格子的边缘，如图所示，左侧是理想情况，右侧是实际情况。

在早于Windows XP(包括没有手动开启ClearType的XP)的Windows操作系统中，微软的做法就是将矢量字体直接光栅化，无进一步处理。
我们可以想到，当我们需求的字号很小的时候，其锯齿化会显得愈加明显。那为什么当我们在XP中使用小字号字体时并没有觉得有很明显的不清晰呢？微软在设计时加入了一个Trick，在TrueType中嵌入了一些小字号的点阵字体。当使用小字号字体时，会直接使用对应的点阵字符而非即时渲染矢量字体。

2.2. 抗锯齿技术(Anti-Aliasing)

抗锯齿是计算机图形学中常见的技术，具体在这里不细说。这里说一种字体渲染中最常用的方法：灰度渲染(Grayscale rendering)。
在灰度渲染中，边缘的像素不再是纯黑的，它的灰度值取决于理想的字型在此像素所覆盖的面积比例。这样，字体的轮廓看起来更加平滑，设计的细节也更加丰富。屏幕上的字体不再仅仅满足于清晰可辨，它们甚至还可以体现字体本身的特征和风格。
这一方法与照片重新采样（resampled）到一个较低分辨率时的原理是相同的。我们的眼睛和大脑在理解灰色像素所包含的信息时，会将它转换为字型的轮廓，这就让我们可以获得与原始设计极为接近的渲染效果。

在我的Debian中，开启抗锯齿的效果非常明显：

2.3. 字体微调(Font Hinting)

字体微调是指字体制作者针对字体渲染给出一些线索(Hint)建议调整轮廓字体使其和栅格对齐。过度的字体微调会使字体失去字体特点，但显示的更清晰。
如图：

不带微调（上、下部分位于上边的行）和带微调（上、下部分位于下边的行）的字体测试。上部分为100%缩放，下部分为400%缩放。微调造成了边角对比度提升，但损失了忠实表现和自然间隔。

在我的Xfce4中，将Font Hinting级别设置为Full，效果会极其明显。如图：

可以清楚的看到，Hinting级别为Full时，字体明显与栅格更为对齐，但丧失了一部分字体的忠实还原度。

2.4. 亚像素渲染(Subpixel rendering)

亚像素渲染的特点是加入了颜色信息，如果我们把屏幕截图不断放大，可以看到字体边缘有红蓝两色出现。

随着LCD屏幕逐渐代替传统CRT显示器，亚像素渲染是一种充分发挥出LCD特点的字体渲染方式。

在液晶显示屏上，一个像素是由红、绿、蓝三个子（亚）像素构成的，它们决定了这一像素的颜色和亮度。LCD能够做到单独控制每一个子像素的开关。LCD屏幕像素(3x3)的样子：

因为这些子像素非常小，以至于人眼无法察觉到他们是一个个独立的颜色点。与单纯的灰度渲染相比，水平方向的分辨率翻了三倍。垂直方向的位置和粗细也更加的精确，文本也呈现得更加清晰。

在我的Xfce4中，为了更直观，我将字体调节到很小，效果会比较明显。如图：

3. Windows操作系统中的具体表现

Windows系统由于历史包袱太重，ClearType与微软雅黑出现太晚，字体渲染质量一直被用户诟病。Win7之后的Windows渲染字体有两套接口，GDI和Directwrite。前者历史包袱沉重，后者被广大用户喷效果还不如前者。Cleartype是GDI的一种技术。

不知道微软为什么这么设计，但Cleartype是一种阉割了的亚像素渲染技术。它只吸纳了水平方向上亚像素渲染技术的优点，却全然抛弃了垂直方向上平滑度的改进。

而Win7开始，微软决心抛开GDI，重新建立了DirectWrite，但DirectWrite用户缺乏具体控制权，同时，历史原因使得大部分应用程序仍然使用GDI接口，DirectWrite迟迟没有得到真在的改进，Windows的字体遍一直被用户诟病至今。

建议：把Windows鸽了，有钱上Mac，没钱上Linux :)

4. 参考资料

https://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/
https://blog.csdn.net/fishmai/article/details/53304105
https://en.wikipedia.org/wiki/Font_hinting
https://en.wikipedia.org/wiki/ClearType

title: 对计算机字体渲染的一些研究
time: 2018-09-27 00:39
tags: Font
category: Life