陈颂光
全栈工程师,能够独立开发从解释器到网站和桌面/移动端应用的各类软件。
关注我的 GitHub

用FontForge设计字体

在各种排版任务(包括网页设计、应用程序界面设计)中都需要选择字体,有时在字体缺字时还需要造字或是微调笔划细节。我们就以FontForge为例说明如何设计字体,并回顾一些关于字体的常识。当然,我们只能从技术层面作简要的介绍,让你有足够能力实现你的想法,至于品味之类的问题不好说。虽然技术上的焦点更多在于如何制作各个字形,但更重要的是确保字体中不同字形应该有高度的风格一致性,因此在设计字体过程中要始终关注重复的性质。

字体常识

字体的本质

通常我们说的字体就是字符到字形的映射,字符不外是一个数(通常是Unicode代码点),而字形则是一个图像。现在计算机排版用的字形一般是矢量图(由于位图在缩放时锯齿严重,现在一般不用位图字体了),并且轮廓由一些分段二次(如TrueType字体)或三次(如OpenType字体)闭曲线组成。

字体的几何参数

在上图中有三条水平线,中间的是基线,通常排版一行文字时会把各字形的基线对齐。上面两条线间的距离称为上高,下面两条线间的距离称为下深,这两个参数是字体的重要几何参数,适用于字体中所有字形,在排版时会用于计算行高。以下是一些简单的观察:

  • 每个字形可以有不同的宽度,这在排版时也会被用于决定为字符预留多宽的空间,在拉丁字符中一般以“M”对应的字形最宽,故“M”的宽度(em)经常作为相对长度单位
  • 大写拉丁字符对应的字形一般轮廓高度大致相同且下方大致对齐基线
  • 除b、d、f、h、k、l、t外其它小写拉丁字符对应的字形轮廓一般上方大致对齐(不考虑i、j的点),其它字形轮廓上方则一般与大字的轮廓大致上方对齐,故“x”的高度(ex)也经常作为相对长度单位
  • 除g、j、p、q、y外其它小写拉丁字符对应的字形轮廓一般大致下对齐到基线,其它字形轮廓下方则一般大致对齐到下深线
  • 一个字形的轮廓可以超出上高线、下深线或者左右边界,只要不是太夸张一般也能显示,但可能与其它字形或上下划线相交

字形的构成

上图更深入地解构了轮廓的组成,其中轮廓用黑色线表示,曲线上标记了一些点:

  • 用圆形标记的是曲线点,它两侧的曲线段有公共切线,用紫色和粉蓝色线段表示,线段的另一端点叫控制点,用叉标记。当使用二次曲线时,一对相邻曲线点有一个公共的控制点;但使用三次曲线时没有这限制。即使你不了解样条函数理论也容易看出,两个曲线点间的二或三次曲线段可以由这两个曲线点加上一或两个控制点确定。
  • 用菱形标记的是水平或垂直曲线点,它与曲线点类似,但该点处切线必须水平或垂直。
  • 用三角形标记的是切点,它的一侧是直线,另一侧不是直线段。
  • 用方形标记的是不光滑点,它两侧的曲线段在该点可以有不同的切线。

字体的分类

以下是字体是部分可能的特性:

  • 衬线
    • 有衬线字体(如serif家族)中字形的笔划末端有专门设计的笔锋(如ABCxyz ),通常被认为适合印刷品,因为更优雅。
    • 无衬线字体(如sans serif家族)中字形的笔划末端更简单(如ABCxyz),通常被认为适合屏幕,因为分辨率低时更容易看清,也用于标题,因远处就能看清。
      有无衬线之对比
  • 风格
    • 普通体
    • 斜体:专门设计的手写体,与普通体有不同的构造(如不对称的衬线),常用于强调。
    • 倾斜体:通过对普通体进行仿射变换得到,在没有斜体用时往往可用倾斜体作后备。
  • 粗度,笔划由细到粗有幼体特轻体轻体正常中等半粗体粗体特粗体黑体等。它们可能是人手设计的也可能是通过算法生成的。
  • 宽度
    • 等宽字体中每个字形宽度相同,如xiMx,通常只用于显示代码或文本表格等用途,因为能对齐。
    • 非等宽字体,通常“M”比“I”要宽得多,如xiMx
    • 另外,有的字体中字符宽度有调整空间,如报纸用的字比较窄以便装下更多内容,而幻灯片用比较宽的字让人们更容易看清。
  • 大小。通常由上高表示,不同大小的字体可能是专门设计的,也可能是用算法缩放或插值生成的。
  • 紧缩。有些字符间如“To”和“Av”由于结构上“互补”,如果直接让两个字形挨在一起,会显得它们间距离特别大,因此字体往往会专门为这种字符对设置紧缩量。
  • 变种。有的字体有多种变种,把某一些字符组合对应到另一字符组合去显示如:
    • 小型大写,如小型大写
    • 数值表示方式,如在“0”加上斜杠以便与“O”相区分
    • 连写,如分数
    • 全角和半角
    • 繁体和简体

设计字体

设计流程

当打开FontForge时你可以选择创建字体或打开现有的字体文件,然后就会显示字形索引,即每个字符对应的字形(没有的话显示浅灰色的叉):

Fontforge索引

这时可以在“基础”菜单中选择“字体信息”查看和修改字体的各种参数,除了版权信息外,比较常用的有“一般”选项卡中的“上高”、“下深”、“M字大小”和“倾斜角”,还有“查找”选项卡中设置替换处理(用于连写、重音等等):

Fontforge字体信息

如果双击一个字符或字形(如果没有看到你要的字符,可在“编码”菜单中设置字符集),则会打开字形编辑器:

Fontforge字形编辑器

为了避免低级错误,可以在“基础”菜单中“校验”中选择“验证”(针对整个字体)或“发现问题”(针对选中的字形)来检查常见错误。为了压缩字体大小,可以在“基础”菜单中选“简化”,但简化后最好再选“增加极值点”。

确认修改正确后,可以在“文件”菜单中选择“保存”为sfd文件,或者选择“生成字体”生成Opentype、Truetype、Postscript或SVG等格式的字体。

字形编辑

轮廓编辑

先看个简单视频,可以说明编辑字形的基本方法:

以下介绍各种工具的用法,使用工具前先在工具箱中选中工具,然后:

  • 选择工具。同时按下Shift可选取并。
    • 通过点击选中画布上的点或路径。
    • 通过拖放可选中一个矩形区域内的所有对象。
    • 通过拖动已选中对象可移动它们。
    • 通过拖动可移动控制点。
  • 缩放工具。
    • 通过点击放大。
    • 通过按着Alt点击缩小。
  • 手绘工具。
    • 按下左键移动鼠标即可画出不规则曲线。
  • 拖动工具。
    • 按下左键移动鼠标即可滚动以便查看原来超出视线范围的部分。
  • 测量工具。
    • 按下左键移动鼠标即可给出线段的长度、倾角和与曲线的交点。
    • 光标悬停在曲线附近时会显示斜率、曲率和曲线半径。
  • 钢笔工具。
    • 钢笔工具用来在曲线上添加点并拖出其控制点。
  • 小刀工具。
    • 按下左键移动鼠标划过曲线即可在划过处把曲线切成两段。例如可用于切出一个图形的其中一部分。
  • Spiro模式。进入这模式后会用不同的方式控制曲线,这里不会详细介绍它。这时曲线由其上的曲线点(直到四阶导数连续)、g2控制点(直到二阶导数连续)、约束点和不光滑点决定。一些人认为通常模式下控制点在曲线外并不直观,一些人则认为Spiro模式缺乏局部性(增加一个控制点可导致很远外的曲线段发生变化)导致难以把握。
  • 控制点工具。
    • 通过点击会创建一个控制点并加到当前曲线。
  • 垂直/水平控制点工具。
    • 通过点击会创建一个控制点并加到当前曲线,该控制点的切线总是水平或垂直的。
  • 不光滑点工具。
    • 通过点击会创建一个不光滑点并加到当前曲线。
  • 切点工具。
    • 通过点击会创建一个切点并加到当前曲线。
  • 矩形/椭圆工具。
    • 点击工具可决定画矩形还是椭圆。
    • 双击工具可选择拖动方式(边框还是中心扩展)
    • 按下左键移动鼠标即可拖出矩形或椭圆。
  • 多边形/星形工具
    • 点击工具可决定画多边形还是星形。
    • 双击工具可选择顶点数。
    • 按下左键移动鼠标即可拖出多边形或星形。
  • 缩放工具。
    • 双击工具可选择倍数和中心。
    • 按下左键移动鼠标即可缩放对象,按住Shift可以保持比例。
  • 旋转工具。
    • 双击工具可选择角度和中心。
    • 按下左键移动鼠标即可绕最初点击的位置旋转对象。
  • 翻转工具。
    • 按下左键移动鼠标即可水平或者竖直地翻转选中的对象,原点是最初点击的位置。
  • 倾斜工具。
    • 按下左键移动鼠标即可将选中的对象倾斜某个角度。
  • 3D旋转工具。
    • 双击工具可选择角度和中心。
    • 按下左键移动鼠标即可以在第三维度旋转对象,并将结果投影回平面上。
  • 透视工具。
    • 按下左键移动鼠标即可仿射地扭曲图形。

一个常见问题是当轮廓有洞(数学上叫非单连通,如“O”中间有个洞)时,绘制曲线的方向(顺/逆时针)是重要的,外边界与内边界方向要相反。如果发现弄错了导致洞看不见,也不用太担心,这时通常按“基础”菜单中的“正确方向”即可修正问题。

另外在曲线相交时,可以用“基础”菜单中的“重叠”子菜单对区域求并、交或差。

字形宽度和样式

在“尺寸”菜单中可设置字形宽度、左边距(左边界到轮廓的距离,可以负)和右边距(轮廓到右边界的距离,可以负)。另外也可以通过在字形编辑器中拖动左右边界线来设置。通常来说。对称的轮廓应该有相同的左右边距。

在“尺寸”菜单中“按类属压缩”或“压缩对详览”可设置字符间的紧缩。如果你不确定应怎样设置,可以先在尺寸窗口中预览一下:

Fontforge尺寸窗口

Fontforge还提供了一些算法用于实现一些常见效果:

  • “基础”菜单的“样式”菜单中可模拟改变粗度、改变宽度、斜体、倾斜体、内线、轮廓、阴影、线框等效果。
  • “基础”菜单的“生成”菜单则可创建重音字符、某些组合字符和一些重复的字符。 在需要这些效果时先用这些算法再微调可以节省大量时间。
关键词 排版