【字体设计】如何绘制优质的曲线路径？
设计字体时，并不能随意地布置字形轮廓曲线路径的节点或手柄控制点，这些点位置的细微差别可以影响整个字形轮廓的气质。合理布置路径的节点或手柄控制点可以使字形显示更完美、减少一些不必要的错误和麻烦，同时在提高兼容性，避免字体栅格化渲染器陷入困境等方面也存在优势。
一般情况下，绘制优质的轮廓路径曲线，需要遵循以下一些通用的基本规则。
1 三角规则
多数情况下，曲线段要落在一个假想的三角形区域内。这个三角区域分别是由以下三点共同构成：线段两端的两个节点（Nodes，位于路径曲线上的点），以及两个控制手柄延长线的交点所形成的封闭区域，如图 1-1所示：
这是针对PostScript曲线而言的，由于Postscript曲线使用三次贝塞尔曲线（Bézier curve，也叫贝齐耶曲线），因此它的形状受到两个节点和两个手柄控制点（control points，也叫Handles，特指不在曲线上的贝塞尔控制点）的控制。也就是说，当PostScript曲线遵循三角规则时，这个三次贝塞尔曲线的所有节点和控制点，包括手柄控制点都会落在假想三角区域内，而不会在该区域之外。如果不遵循这个三角形规则，渲染的时候可能会发生错误。
如上图 1-2，（甲）中的三段曲线的节点和手柄控制点均在假想的三角区域内，而（乙）中用红圈圈起来的手柄控制点均落在假想的三角区域外。
2 极值点
一般情况下，尽量将节点放在曲线路径的“极值点”上——即曲线上水平或竖直切线的切点，此时手柄控制点的连线（即该极值点的切线）应当是水平或竖直的。
什么是极值点？简单理解，就是沿着某段闭合的曲线轮廓行走，当到达曲线最顶部、最底部、最左侧或最右侧时所处的那个点就是相应方向上的极值点。最顶部、最底部的极值点的切线是水平的，最左侧、最右侧的极值点的切线是竖直的（如图 2-1（甲）所示）。
为什么要尽量将节点放在极值点的位置？1）作为一个技巧，将节点放在极值点上可以简化路径节点，减少曲线路径上一些不必要的节点数量，让路径变得更简单；2）可以添加hinting信息；3）由于极值点位于曲线段的边界，因此处于极值点上的节点能更好地定位曲线的形状和空间占位（Bounding Box），减少意外的变形。简单地说，极值点能够优化、简化曲线路径，同时可以让字形得到更好的渲染。
如下图 2-1，（甲）中所有曲线路径的极值点上均存在节点，这样可以用较少的节点完成曲线的绘制；（乙）中有几个节点不在曲线路径的极值点上，这样会使绘制路径变得比较麻烦；（丙）中曲线路径上箭头所指的节点非常接近极值点，可以看出来该点两侧的控制手柄接近水平，但这种做法是不好的。在Fontlab中，默认会把极值点上的平滑节点标记为深绿色，非极值点上的平滑节点则会被标记为浅绿色。
⚠️例外： 应当避免在平缓曲线（shallow curves，即弧度小、变化平缓的曲线）的极值点上布置节点。因为这种曲线曲率较小、弧度小，强行在极值点上布置节点可能会搞乱曲线的形状，同时可能会导致其他错误，而且这对渲染质量提升无实质帮助。如下图 2-2中的平缓曲线均用小箭头标出，其中（甲）和（乙）均不需要在极值点上放置节点，（丙）中箭头处曲线的弧度过于平缓，也无须在极值点处放置节点。
💡小技巧： 在Fontlab中，可以通过以下方式快速调整极值点：
- 按住Shift并双击手柄控制点： 可以将手柄对应的节点调整为极值点，且保持节点位置不变；
- 按住Alt并双击手柄控制点： 可以将手柄对应的节点沿轮廓移动到极值点的位置，且尽可能保持曲线形状不变（轮廓曲线会有轻微变形）；
- 按住Alt并拖动节点： 可以在手柄不变的情况下，使节点沿手柄方向移动；
- 按住Shift +Alt并拖动节点： 让节点沿轮廓曲线移动，并尽可能保持轮廓曲线形状不变（曲线会有轻微变形）；
3 路径方向
对于PostScript轮廓：沿路径方向，字形的填充区域应在左手边。如图3-1所示，在一般情况下针对闭合曲线而言，顺时针方向的路径包含的是未填充的空白区域，而逆时针方向的路径包含的是填充了的区域。因此顺时针方向的路径应当被包含在逆时针方向的路径里面，此时顺时针方向的路径便形成了闭合的空腔。为了方便记忆，可以将字形中填充区域想象成公路中间的绿化带，而填充部分的两侧就是公路，路径的正确方向就像是绝大部分公路需要靠右行使一样。
上述的路径方向是针对PostScript轮廓而言，而对于TrueType类型的轮廓，则是完全相反的情况。
对于诸如Fontlab、Glyphs这样的专业字体软件，在导出时软件会自行确保路径的方向是正确的，或者可以在设置中一键纠正错误的路径方向。
4 避免交叉重叠
在最终导出的字体文件中，单个字形应当避免路径之间的交叉重叠（overlaps）。不过通常在原始的字体编辑文件中，完全可以保留交叉重叠的状态（如图 4-1（甲）所示），因为这样可以方便编辑字形（例如复制移动某个部件）。只需要在软件导出设置中选择自动去除交叉重叠，这样软件可以在导出字体时自动去除交叉重叠的部分。
但应当注意，原始字体文件中保留交叉重叠时，不应出现双重叠的情况，这样会导致字形出现空白的缺口（如图4-1（乙）所示）。
5 曲率梳分析
可以利用曲率梳分析图像来改善曲线质量。在Fontlab中有一个自带的Curvature工具，可以对曲线进行曲率梳（Curvature comb）分析。打开View > Contours > Curvature后，沿着曲线路径会显示高低起伏的橙色图像，这个图像就是曲率梳。通过它可以直观地看到沿曲线的曲率变化情况，曲率较小时曲率梳较短，曲率较大时则较长，若是直线则不会显示曲率梳，如图 5-1所示。
什么是曲率？通俗地讲，曲率是衡量曲线在某一点处弯曲程度的几何量。曲线弯曲程度越大，曲率越大，弯曲程度越小，曲率越小，直线任何一点的曲率为0。 想象沿着曲线方向匀速开车，方向盘转动得越急，说明曲线在该点处弯曲得越厉害。
在设计中，通常用以下四种方式描述曲线连接处的曲率状况：
1）G0位置连续： 即锐利连接（sharp connection），在需要尖锐转折的地方中会用到。两条曲线在端点处重合，但能看到一个明显的折角，这是一种硬朗、尖锐的连接。这是曲线连续最基本的要求——两条曲线通过一个点连在一起。在Fontlab中，锐利连接处的节点称为Corner node（或Sharp node） ，用一个正方形表示。在G0连续的曲率梳图像中，曲线连接处会形成一个楔形的间隙或重叠，如下图 5-2所示。
2）G1切线连续： 这是最基础的平滑连接，即曲线在连接处是平滑的，没有尖角，但仔细观察可以发现连接处还不够流畅，曲率有变化。G1连续只要求在G0的基础上，曲线在连接点的切线方向相同。在Fontlab中，平滑连接处的节点称为Smooth node，用圆形表示。任何用Smooth node连接的地方至少都有G1连续。在G1连续的曲率梳图像中，曲线连接处的图像无间隙或重叠，但在连接点切线的垂线方向两侧，曲率梳图像会突然跳跃（曲率突变），存在断崖式的高差。如图 5-3所示。
有一种特别的平滑连接节点用来连接曲线和直线，这种节点称为Tangent node，它在Fontlab中用三角形表示。Tangent node只有一个手柄，其方向与被连接的直线方向一致。
在Fontlab中，选中Corner node，然后设置为Smooth就可以将其变成G1连续的Smooth node，或者直接双击Corner node也能达到同样的效果。
3）G2曲率连续： 曲线在连接处看起来比G1更加平滑流畅。要求曲线连接处在G1连续的基础上，连接处的曲率相同。在G2连续的曲率梳图像中，连接处无间隙或重叠，且半径相等，也就是连接点切线的垂线方向两侧的曲率梳图像无断崖式高差，但图像外轮廓存在尖角。这意味着曲率梳图像在节点两侧的高差越小，那么曲线在该连接处越接近G2连续，看起来越平滑，如图 5-4所示。
在Fontlab中，有多种方法可以将G1连续的节点自动调整为G2连续的节点，比较推荐的方法是：按住 Ctrl + Alt 再双击节点或选中节点，然后按Contour > Handles > Harmonize（或右键菜单中Handles > Harmonize）。这样的好处是可以保持连接节点的位置不变。
4）G3曲率变化连续： G3连续比G2更加顺滑流畅，提供了非常高级别的连续需求。要求曲线连接处在G2连续的基础上，连接处的曲率的变化率（曲率导数）也相等。在G3连续中，连接处两侧的曲率梳图像外轮廓不仅连续，而且在连接处垂线方向的图像轮廓有相同的切线方向。从G2连续的曲率梳图像中可以看出，连接处图像外轮廓存在尖点，若曲率梳图像外轮廓越平滑流畅，那么平滑节点越接近G3连续，如图 5-5所示。
在Fontlab中，可以将平滑节点设置为Superharmonize来让其自动调整为G3连续。
一般地，将曲线连接处为G0连续的称为锐利连接（sharp connection），将连接处为G1、G2、G3连续统称为平滑连接（smooth connection）。从G0到G3，级别越高，则连接处过渡越平滑流畅；级别越底，则连接处显得越坚硬锐利（如图 5-6所示）。在字体设计中，曲率梳分析图像是一个比较实用的工具，可以使用它来轻松观察、判断曲线的平滑度、流畅性，从而更好地调整曲线的形状。具体该用哪个级别的连接，则视具体的使用情况而定。
🛈 字体设计中绝大多数情况下，曲线连接为近似的G2连续就已经足够平滑，这种平滑程度对于人眼来说已经足够了，不必再去要求达到G3连续。
6 拐点与“S”型曲线
6.1 拐点
不必在曲线路径的拐点处添加节点，但若想更好控制曲线，则可以在拐点处布置节点。什么是拐点？所谓拐点就是曲线凹凸性发生变化的那个转折点。拐点前后曲线的方向会发生变化。
如下图 6-1（甲），借助曲率梳分析图像，可以直观地看到字形S中拐点的位置（即黑色箭头的位置）。对于该字形左侧的S型曲线来说，拐点上方曲线的方向是逆时针，而拐点下方曲线的方向则变成了顺时针：
如上图 6-1（乙）所示，S的中部拐点处放置了两个节点，如果能够符合设计意图的话，可以删去这两个拐点处的节点，对曲线的形状没有太大的影响（如图 6-1（丙）所示）。但是，如果在没有拐点的情况下，曲线的形状不能符合设计要求，则需要在拐点处布置节点。如果不想在拐点处布置节点，也可以将S型曲线的中部调整为直线段，如图 6-1（丁）所示。
6.2 优化“S”型曲线
通常将带有拐点的曲线类型称为S型曲线（S-curve）。如下图 6-2（甲）所示，有一个由两个半圆连接成的S型曲线，可以看出S中部的连接处显得非常生硬，虽然是平滑连接，但此处的曲率梳有很大的断崖式高差。那么如何调整可以让它看起来更加平滑流畅？
首先，可以试着删除曲线拐点处的节点，这样可以消除拐点处的断崖式高差（如图 6-2（乙）所示）。但这样会带来新的问题：曲线左右两侧的极值点处的曲率梳存在断崖式高差，意味着该连接处为G1连续。同时曲率梳图像还存在鼓起的肿块。
以右侧极值点为例，此处的曲率梳图像存在突变，上方较低、下方较高，意味着右极值点上方曲率较小，因此可以将该节点上方的手柄控制点往下移动以减小曲率。同理，可以将左侧极值点下方的手柄控制点往上移动。这样可以尽可能地消除相应的曲率梳高差，从而接近G2连续（如图6-2（丙）所示）。
同样以右侧极值点上方的肿块为例（如图 6-2（丙）所示），右极值点上方的肿块表明此处的曲率较大，因此可以将该节点往下移动以减小曲率。同理，可以将左侧极值点向上移动。这样可以尽可能地消除相应的肿块，从而接近G3连续，让曲线看起来更加平滑、流畅（如图 6-2（丁）所示）。
7 精简节点
前文提到：在Fontlab中，节点有三种类型：
1）平滑节点（Smooth node）： 用于平滑地连接两端曲线，用绿色圆形表示；
2）切向节点（Tangent node）： 用于直线和曲线间的平滑连接，用紫色三角形表示；
3）尖角节点（Sharp node）： 用于任意两条路径（直线或曲线）间的连接，连接处是坚硬的，用红色正方形表示。
在绘制字形轮廓时，需要选择合适的节点连接不同类型的路径。同时应当注意在不影响设计意图的情况下，尽可能精简节点的数量，删除多余的节点或手柄控制点。
如上图 7-1所示，需要对（甲）中的路径节点进行精简优化。由于字形顶部和右侧均是直线段，所以应删去多余的节点（用绿色箭头表示），再删去多余的手柄控制点（用橙色箭头表示），字形左侧是直线和曲线相连，因此应将尖角节点变为切向节点（用红色箭头表示）。精简优化后的轮廓路径如图 7-1（乙）所示。
8 关注曲线张力
合适的曲线张力（Curve Tension）是一种经验，而非规则。在Fontlab中，曲线张力通常用来描述贝塞尔曲线路径“紧绷”或“松弛”的程度，可以直观地反映曲线被其控制手柄“拉拽”的强度。
在Fontlab中，曲线张力在手柄上以百分数的形式表示，它在数值上等于节点手柄长度占该节点手柄方向延长线与相邻节点手柄方向延长线的交点间的距离的百分比。
如上图 8-1所示，曲线张力即为：
对于上图左下节点，其右侧手柄长度 \(a\) 为147.82个单位，该节点到手柄延长线与右上节点手柄延长线的交点之间的距离 \(b\) 为210.06个单位，因此该侧曲线张力为：
因此该节点手柄上会标注曲线张力近似值\(70\%\)。
对于某一段曲线而言，该曲线的整体张力可以表示为：两端节点靠近曲线那一侧的曲线张力的平均值。
根据曲线张力的定义易得：当曲线整体张力越低，曲线整体越会接近一条直线；当曲线整体张力越高，曲线越会形成一个紧绷的弧形、越会向某一侧凸起。当曲线张力为0%时，手柄控制点会与节点重合；当曲线一侧的张力为100%时，该侧手柄控制点会落在另一侧的手柄延长线上；当曲线张力超过100%时，曲线将违反三角规则。
Fontlab中有一个叫Balance的命令，它可以让曲线上相邻节点的手柄曲线张力取平均值后相等。但这样会轻微改变曲线的形状，请谨慎使用该功能。
总结
以上便是绘制优质曲线路径的一些基本方法，在实践中需要融会贯通。
对于初学者而言，尽量掌握这些规则，对熟悉路径的绘制有很大的帮助。但是深入学习后会发现，这些规则仅仅只是一些参考，实际设计中有很多地方需要打破这些规则。应当注意这些方法始终是为设计目的而服务的，需要灵活运用，不可一味机械地遵循“死”规则。在绘制过程中，如果只是机械地遵循其中某些规则，反而会使某些形状无法实现，并限制你的创造力。
对于规则之外的情况，可参考这篇文章：Drawing Against “The Rules”
永远记住：规则只是仆人，而非主人。
浙公网安备 33010602011771号