UI设计理论 - GUI原理4 - 矢量字体

      说起矢量字体，不得不说一下多边形填充原理。本来是想将多边形填充作为单独的一节内容，可惜说得太细我累大家也累。

  多边形填充最需要关注的就是斜率，计算每条边的斜率，从而得到每条边在每一行上的切点。然后从左到右，将各切点连接起来，逐行进行。

  多边形有两种填充方式，Alternate和Winding。矢量字体主要用的前一种方式，而winding会将所有的切点都连接起来，没有了中间的分隔区域。

  比如，在Alternate模式下，从最左边的切点1，会连接切点2，然后从切点3连接到切点4，而2到3是不连接的。这样就形成了一个空洞，也是矢量字的奥秘所在。Winding模式会将所有的切点都连接起来，即从最左边的一直画到最右边。

FillMode

多边形组——PolyPolygon

将多个多边形组合成一个组，从而形成复杂的多边形组。同样，这个组也依赖于FillMode的填充模式。下面我们来看一下中文的“口”是如何写出来的。

“口”由两条多边形组合而成，根据FillMode为Alternate，相重叠的部分不显示。用笔在字的中央画一条横线，就可以找到4个交点，而交点2到3是不连接的，这样就形成了“口”中间的洞。

微软Arial字体中“S”的曲线

微软的Arial字体中存储的“S”，就是多个Bezier3点组成的。点41是锚点，而40和42是控制点，来控制通过41的曲线的张力。在点的定义上，有on curve和not on curve两种，通常将在曲线上的点定为锚点，而不在曲线上的点为控制点。

这是我年初的时候，为了研究矢量字体，将字母P用微软的方式输出后，再读取字库点阵数据，使用红叉画出字库中所有的点。P是由两条Bezier曲线包围而成的，第二条起着切割的目的，已形成P中间的圆洞。

看看字母“B”的填充。

  字体是如何保证对齐的呢？原来在字库内部，有一个基准线，就好像信纸的虚线，用来水平方向对齐的，同样，也有个垂直方向的基准线。每个字都有上浮和下沉的高度，这也是该字的最上和最下的点所处的位置。

    矢量字在不同字号下，根据点阵尺寸，显示的精细程度也不一样。我们这里将“8”放大了看，在小字号和大字号下的效果。

    在不同的字号下，根据最简单的缩放原理，将所有的点缩放到合适的位置，再确定曲线。这时候，一条边就占据不了整列像素，或者一条边压在了两列像素的中间， 这样就造成了灰色的线条。而这并不是我们想要的效果，Photoshop通过USM锐化滤镜，将虚边得以逐步清晰，以达到所要的矢量字。

    苹果系统通过调整整体点阵的位置，将所有的点适当便宜半个像素以内的位置，可以实现较为清晰的字体。如果在关闭了消除锯齿方式，则有些边线由于占据不了半个像素，而不能够显示，这就形成了所谓的缺边或者缺笔划。

有些软件，比如Adobe Acrobat，通过一种较为复杂的方式，以实现矢量字的清晰。将某些关联的点作为一个segment，并且局部偏移到邻近的整数位，而其他部分不动。这种方法目前较为流行，可以实现比苹果和ps还要清晰的矢量效果。

为什么我们通常看到的齿条文字这么清晰呢
 
  微软的TTF为了保证小字号下的清晰，可谓是用尽了方法。首先，在庞大的字库，内置了数个字号的点阵字，接着才是矢量字。比如宋体，内置了12、14、 16、18等几个点阵字库，在这些之外才使用矢量字库来渲染。这也是为什么一个TTF文件要几兆甚至几十兆的容量，不过内嵌的点阵字越多，在不同字号下实 现的效果自然越好。别小看了这些点阵字，每一个都是平面设计师在工具上画的，并非由软件生成。唉，可怜的设计师啊～～～～～～

  不过，有个特例。比如Arial字体，内部全是矢量字，但各种尺寸下都是这么清晰。为什么呢？

  原来，微软在字库中加入了解释程序，interpreter，一种专门用于字库渲染的脚本命令。在不同的字号下，都有相应的语句，将矢量字得以最清晰化。 这是一种复杂的技术，微软也觉得不能广泛使用，所以只有在部分的英文字库中才有，而且该脚本对应每个字都有一段代码，容量非常大，用在汉字上几乎是不可 能，除非是整个文字不多于100个才能使用。

  interpreter就是这么神奇，他也是目前最好的技术，能够将矢量字渲染的和点阵字一样的清晰。他将某些边线的距离拉开，而将另一部分收缩，总之是按照人的想法来做的，这也是编好的程序。

  我用一种新的方式，保证了任何字号下的清晰。目前还在做实验，希望将来能够做成PS的插件，或者做成个工具，输出成PNG格式。这样，设计师就能够显示最清晰的矢量字体了，免得用PS输出的看不清。

矢量字体的终极技术

在1998 年的时候，微软声称发明了一种新的技术，能在LCD上将矢量字体的清晰度提高到300％。而后，出现了名为Microsoft Reader的软件，我还用过几个版本。Adobe也不甘示弱，随即在Acrobat 4中对CoolType进行了支持，而Linux的FreeType库也开始支持次像素平滑。据我多年的研究观察，Acrobat做的最好，最灵活，而微 软的缺少适当的调节工具，Linux的次像素平滑简直就是垃圾，照虎画猫。

ClearType使用彩色来描边，显示对比度越是强的文字，比如白底黑字或者黑底白字，都是最清晰的。其实，理论上ClearType能够将显示精度提到到300％，但实际上只能达到200％左右。

一 般来说，液晶显示器的点阵分布都非常均匀，每个点都是由红绿蓝3色排列而成。我们通常要显示一个白色，需要将红绿蓝都点亮，而黑色是都不显示。 ClearType将点的概念再次扩展，把邻近的两个点3色混淆，借前一个点的颜色而忽略后一点的某种颜色。这样，就可以把传统的一个点的最小单位扩展到 1／3个点的单位。

在 使用ClearType技术后，原来的字体渲染将更加清晰，当然，只限于LCD显示器，CRT会更加模糊。ClearType还有一个关键的技术，就是 Linux的次像素平滑没有学去的地方，一定要考虑到红绿蓝的颜色亮度平衡。一般来说，绿色的亮度最高，而蓝色的最低，所以我们要在显示绿色的时候加点红 色和蓝色来调低亮度，而显示蓝色的时候要加入绿色和红色来增加亮度。这种做法也可以使边界的彩边不是那么明显，看起来更像是黑色的字。不过，这种做法使得 原本可以提高显示精细程度到300％的技术，降低了许多，不过还是要高于200％。

下面我最满意的矢量字效果，这是试验程序截图，以后做成PS的插件，供大家免费下载使用。

注：仅限LCD显示器观看，否则效果只会更差。