创建像素字体

如果你了解了做法，那么创造一款像素字体很容易。你可能已经看过了我们之前制作的像素字体的视频教程。本文中会介绍更多内容。

新建字体

首先，启动 Glyphs（……）并选择 “文件 > 新建”（Cmd-N）来新建字体文档。这次，在你开始绘制字母之前，前往 “文件 > 字体信息”（Cmd-I）并为你的字体起个响亮的名字。因为我们创意爆棚，所以为它取名 “Pixelfont”。然后，选择 “其他设定”，你可以在这个选项卡中找到 “网格间距” 选项。“网格间距” 选项会控制节点的坐标值如何取整。默认值为 1。对于像素字体而言，我们希望所有的工具和修改都贴齐网格，所以将数值设置得大一些。这样，可以确保你的“像素”们可以自动摆在正确的位置。我们将 “网格间距” 设为 50：

为什么网格间距会是 50？简而言之，我们选择 50 是因为它可以被 1000 整除，并在特定的字号下提供完美的像素渲染。

计算字体的屏幕显示尺寸：屏幕上的字号以 PPM 计算，即 “每个全身字宽所占的像素数”。按照 PostScriot 格式字体的默认数值，每个全身字宽包含 1000 字体单位，如果这样，那么每个全身字宽中会包含 (1000÷50=) 20 个网格，也就是像素。换句话说，在字号 20 px 的情况下，字体中的每个 “像素” 正好对应一个屏幕像素。对于分辨率为 72 ppi（像素每英寸）的屏幕而言，也就是 (20 px ÷ 72 ppi × 72 每英寸的 pt 数换算 =) 20 pt。这是 Mac 和 Adobe 软件中默认的分辨率设置。在 Windows 上，分辨率按 96 ppi 计算，所以在 (20÷96×72=) 15 pt 的字号下，像素字号为 20。

绘制像素

在字体视图中，点击左下角的加号按钮来新建字符形。双击名称（newGlyph）将其重命名为 pixel：

双击字符形区域，在新的编辑标签页中打开字符形。你会看到根据你的设置所出现的网格。在工具栏中选择 “矩形工具”（F）并绘制一个和网格单元等大的矩形。你会发现，路径自动贴合了网格。将正方形绘制在原点处，即基线和左侧边线相交的地方。

在画布上的任何位置右击来打开上下文菜单。取消勾选 “导出” 选项。我们不想导出 pixel 字符形，因为它无法用键盘敲出来，在最终字体中保留的话只会占用资源。

这就是你在像素字体中所需要的全部路径了。耶！

搭建字符形

要开始制作你的字母表，在字体视图中双击你最喜欢的字母来打开它。我要从 f 开始，因为我喜欢毛茸茸的（fluffy）小白兔。前往 “字符 > 添加部件”（Shift-Cmd-C），从对话框中选择 pixel，然后点击“选择”。

选中 pixel 部件并按下 Cmd-C 将其拷贝。然后，按下 Cmd-V 来粘贴，并通过方向键或鼠标来移动。重复此步骤，直到你满意了这个字符形为止。或者，你也可以按住 Option 键的同时拖动部件来复制。你还可以同时操作多个 pixel 部件，这样可以进一步加快速度。别忘了在框选的同时按住 Option 键，因为常规的框选仅会选取路径。

好了，这就是我们的 f：

那么，继续快乐搭建你的其他字符形吧！

批量编辑

默认的字符形宽度是 600 单位。这样看上去并不太好：

要开始进行字间距设计，你可以让你的全部字符形拥有同样的左右边距。首先全选字符形（Cmd-A），然后在字体视图中左下角的面板中输入边距数值。左右边距的数值必须是网格间距的整数倍，本例中我们直接设为 50。

这样，再来对单一字母进行设置就更简单了。想要了解更多关于字间距设计的内容，请阅读我们的字间距教程.

看上去好多了，你觉得是吧？

像素变体

当然了，你可以用你的 pixel 部件玩点花样。比如，它可以不是方的：

要想实现这个，你可以直接修改 pixel 的形状，或者添加一个新字符形，命名为比如 pixel.circle。你会发现，当绘制圆形时，会产生类似这样的效果：

这是因为 “网格细分” 会将网格进一步分割，贴齐会以细分网格为准，而非直接对应网格本身。如果将细分值设为 25，你的圆形就会变成这样：

从 Glyphs 2.3 开始，手柄点不再向网格贴齐。所以如此一来，细分值设为 2 即可。

将 “细分” 值设为适应你像素设计的数值。要想获得最大的自由度，可将其设为和 “网格间距” 相等。

这样，你就有了两个（或更多）像素变体，但怎样使用它们呢？前往 “字体信息”（Cmd-I）并选择 “子样” 选项卡。点击加号按钮来添加两个新子样。子样会被默认命名为 “Regular”，但你可以在 “Style Name” 文本框中重命名。我们将子样命名为 square 和 circle，因为要们想获得一个方形像素的子样，和一个圆形像素的子样。确保你的字体中有两个像素字符形，比如 pixel 和 pixel.circle。然后，在你想要使用另一种形状像素的子样中，点击“自定义参数”旁边的加号按钮，添加自定义参数。在 “属性” 处填写 Rename Glyphs，或点击箭头后在下拉菜单中选择。如果双击 “值” 区域，会打开一个对话框。填写你想要替换的字符形名称，比如本例中我们想用 pixel.circle 字符形替换 pixel 字符形，所以我们输入：

pixel.circle=pixel

如果你创建了像素形状各异的多个子样，你可以将其用作分层字体。本例中我们叠加了一个方形像素的子样、一个圆形像素的子样和一个三角形像素的子样：

渲染提示

如果你的像素更复杂，就需要确保渲染提示功能关闭。所以，在导出文件（Cmd-E）时，取消勾选 “自动渲染提示” 选项。为什么呢？请阅读我们关于 PostScript 自动渲染提示的教程，了解渲染提示能做什么、不能做什么。

使用滤镜做后期处理

如果你想要再拿你的字体做些实验，可以试试一些内建的滤镜。和之前一样，检查一下你的“网格细分”设置值，否则，某些滤镜可能会产生不能让你满意的效果。例如，如果你对方形像素应用了“圆角”滤镜，你会得到这样的效果：

你可以按 “好” 直接应用滤镜，或者，我更建议将其添加为自定义参数。要实现后者，不要在滤镜对话框中按 “好”，而是点击左下角的齿轮图标并选择 “拷贝自定义参数”。然后，按 “取消”，并打开 “字体信息” （Cmd-I），前往 “子样” 选项卡，点击左下角的加号按钮，添加一个新的子样。修改子样名称（我为其命名 Rounded）并点击 “自定义参数” 区域中的任意位置，将其激活以便粘贴。然后，只要按下 Cmd-V 将刚刚在滤镜对话框中拷贝的参数粘贴进来即可。嗒哒！

使用自定义参数来设置网格间距也是个不错的办法。点击加号按钮添加新的自定义参数，“属性” 处只需双击后填写 Grid Spacing 或单击箭头后从下拉菜单中选择。然后，双击 “值” 处填写 1，网格间距即设为了 1。

使用自定义参数，你可以在导出时为不同的子样应用滤镜，这样就不会破坏原始的像素路径。换句话说，你可以无损地创建一个全像素的字体家族！

本例中，我们使用了 “粗糙化” 滤镜。路径轮廓被切碎，节点则随机散开：

同样，点击齿轮并选择 “拷贝自定义参数”。前往字体信息（Cmd-I）按 Cmd-V 粘贴代码，或新建子样后粘贴。

这里我们使用了 “曲线偏移” 滤镜，但不勾选 “生成笔画” 选项：

点击齿轮拷贝自定义参数代码。前往 “字体信息”（Cmd-I）并使用 Cmd-V 粘贴代码，或新建子样来粘贴。

当然了，你可以在同一个子样中应用多个滤镜。本例中，我们应用 “圆角”、“曲线偏移” 和 “去除重叠” 滤镜：

请注意看：滤镜的顺序非常重要。Glyphs 会依次执行这些滤镜。本例中，我们首先应用 “曲线偏移” 将轮廓扩展 3 单位，这样像素就会产生一点点重叠。然后我们应用“取出重叠”，你可能已经猜到了——将像素合并成一个路径。然后再次 “曲线偏移” -3 单位，将路径移回原来的位置。之后，我们应用 “圆角” 来让字体变平滑。第一个 “圆角” 参数中正值（+20）处理凸角，第二个 “圆角” 参数中的负值（-20）则将凹角变圆。这里负值仅可通过自定义参数手动添加。如果你从滤镜对话框中拷贝自定义参数，只能得到正值。

不过，为什么这么麻烦？很简单。如果我们没有用多个滤镜，而只是直接使用 “圆角”，会得到完全不同的结果：

下例中，我们同样使用 “曲线偏移” 将轮廓扩展 3 单位，应用 “去除重叠” 合并像素，再应用 3 单位 “曲线偏移” 将路径移回原位，和之前那个例子一样。不过这次，我们再使用 “粗糙化” 滤镜：

下例中，我们想让我们的像素字体只有外轮廓。要实现这种效果，我们还是使用 “曲线偏移” +3 单位，应用 “去除重叠” 再应用 “曲线偏移” -3 单位，和前面的那些例子一样。然后我们再添加一个 “曲线偏移” 滤镜，不过这次激活 “生成笔画” 选项。

所以，尽情尝试各种玩法吧，只要牢记滤镜的顺序！

第三方滤镜

想要再 Glyphs 的默认滤镜之外尝试更多滤镜？看一下你的 “插件管理器”，可以通过 “窗口 > 插件管理器” 来访问。它有一个很方便的搜索功能，帮你找到相关的滤镜。（下面提供的链接仅供参考，如果插件管理器出了什么问题，你可能会用到它们。）

Mekkablue 的 Shadow 滤镜用于将你的字符形变成带影子的版本。看一下：

另一个有趣的滤镜是 mekkablue 的 “碎片化” 滤镜。它会将字符形切开，然后将获得的碎片进行移动和旋转随机的数值，用户可以指定随机数的最大值。本例中，我们还是先使用 “曲线偏移” 扩展轮廓 3 单位、应用 “去除重叠” 再应用 “曲线偏移” -3 单位来移动轮廓，然后再使用 “碎片化” 滤镜：

用于像素字体的插件

在像素爱好者中享有盛名的《街机游戏字体》作者大曲都市， 发布了一款用于制作像素字体的可选工具，名为 “Pixel Pen Tool”。这款插件十分方便，能够自动添加 _pixel 字符形，也能即时处理很多字体信息设定，比如全身字宽单位数、网格以及垂直量度：

和 Glyphs 里的其他插件一样，你可以从 “窗口 > 插件管理器” 免费获取这款插件。

在插件管理器中，你也能找到 mekkablue 的 “Pixelate” 滤镜。它会插入像素部件、重设字宽，将轮廓字符形转换为像素字符形，并将原始轮廓移动至背景。

用于像素字体的脚本

有一些很方便的脚本可以帮你处理像素字体。在 mekkablue 的 GitHub 库中，你会看到一个 dedicated to pixel fonts 文件夹。要了解更多内容，以及安装说明，请查看 readme 文档。

2016-09-05 更新：添加了插件管理器。
2020-02-17 更新：添加了 “用于像素字体的插件”

Chinese translation by Willie Liu (刘育黎) from 3type (三言).