创建图标网页字体

几乎所有的最新网页浏览器都可以显示网页字体。因此，最好将你的图标转换成字体而不是 JPEG、PNG、GIF 或 SVG。这样可以节省一些带宽，更重要的是，可以避免栅格化，从而保持图标不受分辨率的影响。

新建图标字体

那么，启动 Glyphs，选择 “文件 > 新建”，并使用 “文件 > 保存” 将你的工作文件保存到方便的位置。然后，前往 “文件 > 字体信息 > 字体” 为字体取一个名字：填写 “家族名称”，如果你想的话，还有设计师（绘制这套图标的的人）及其网址，制造商（开发这款字体的人或公司）及其网址。最后，你可以点击带有圆形箭头的 “刷新” 按钮，让 Glyphs 为你生成一个版权告示。

或者，如果你用的是 Glyphs Mini，“字体信息” 是主窗口上的一个标签页：

其他内容对我们不重要。完成后，关闭 “字体信息” 窗口（或标签页），然后可能要再保存一遍字体。

为你的图标创建 PUA 字符形

一款字体中的坑位称作 “字符形”（其英文即我们最喜欢的字体制作软件的名字 Glyphs），而这些字符形通常和字符对应。简而言之，“字符” 是你键入的内容，而 “字符形” 是你看到的东西。字符和字符形的关系，是通过指定给某个字符形的 Unicode 值来建立的。有时，字符形不需要拥有 Unicode 值，但在我们的图标字体中，每个字符形都会有 Unicode 值。如果你想了解更多关于 Unicode、字符形和字符的内容，请阅读 Unicode 教程。

在一个指定了 Unicode 的字符形中，你应该只放入符合该 Unicode 值含义的图形。所以，比如说在 U+0041 LATIN CAPITAL LETTER A 中，你应该放上至少差不多像个 A 的东西。为什么不能放一个图标？因为这会迷惑搜索引擎、网站的搜索功能，或者如果出于某种原因我们的图标字体无法载入、被替换为回退字体时，也会迷惑试图搞清屏幕上显示的是什么内容的人。

所以我们要做的第一件事，就是全选字符形，并点击窗口下方的减号按钮。当 Glyphs 问你是否清楚自己在干什么的时候，回答说 “删除”：

很好，所以我们的字体中没有字母了，但我们把图标放在哪里呢？很简单：放在 “私用区”（PUA）的 Unicode 所关联的新建字符形中。

私什么区？我来解释一下。在 Unicode 值那很长很长的区间中，有一些值是留给你随便用做什么目的的，或者换句话讲，按照 Unicode 协会那帮善良的家伙们的称呼，供你私用。

Unicode 标准中有这样一些私用区，但对于我们而言最方便的是位于 “基本多文种平面”（BMP，Unicode 值从 U+0000 到 U+FFFF）的这一个。BMP 中的私用区范围是 U+E000 到 U+F8FF。

那么，我们如何在这里创建字符形呢？点击加号按钮（在你刚刚按过的减号按钮旁边），就会出现一个名为 newGlyph 的新字符形。看上去差不多是这样：

现在，你一定要知道 Glyphs 会根据你为相关字符形指定的名称自动设置其 Unicode 值。因此，如果你将字符形命名为 B，那么 Glyphs 将设置其 Unicode 值为 U+0042，这是 “拉丁大写字母 B” 的 Unicode。要将你的字符形放入到 BMP 中的私用区，你必须将其命名为 uni，后接一个 E000 到 F8FF 之间的四位十六进制代码。换句话说，uniE000 和 uniF8FF 之间的任何一个都可以：

你会看到其分类变成了 “私用”。而且，这个字符形的占位图像和 Unicode 值也发生了变化，表明这一字符形现在正式进驻了私用区。很酷。

哦等一下，其实并没有那么酷。如果你只有两三个图标，那就不是什么大事，但如果你有二十个、一百个，或更多图标，那这些名称就帮不上什么忙了。这里有个小技巧。当你通过将字符形的名称改为类似 uniE000 为其指定 Unicode 值之后，你可以再次更改其名称，这次换成一个描述性名称比如 twitterIcon 或 shoppingCartIcon，字符形会保持其 Unicode 值不变：

修改字符形名称后，注意看一下字符形的 Unicode 值。如果它变成了某个私用区之外的值，是因为你为它取的名字是预留给其他字符形的。Glyphs 有一个内置的、能够识别的字符形名称列表，如果你想的话，可以通过 “窗口 > 字符形信息” 看到它。或者，直接在字符形名称后面加上 Icon，就能避免所有问题。

关于字符形名称再说一句。只能使用大小写的 ASCII 字母，即 A-Z 和 a-z，或许名称后面还有数字（0-9）。 空格是不允许使用的，名称也不能以数字开头。所以，homeIcon 和 loginIcon 是 OK 的，但类似 home button 和 MäxIcon 就不 OK。如果你想了解更多关于字符形命名的内容，请阅读正确地为字符形命名教程。

在其他应用程序中准备你的图标

Glyphs 提供了很棒的绘制工具，但也有可能你已经有了矢量的图标。你可以直接从大多数矢量应用程序中拷贝粘贴到 Glyphs 中。因为在 Glyph 中缩放会导致坐标取整的错误，最好在把它放进字体之前缩放你的作品。

请记住，在 Illustrator 等软件中的 1 点（pt）会变为 Glyphs 中的 1 单位。而且通常你会想让你的图标和大写字母的尺寸大致相同。大写字母的平均高度是 UPM（每全身字宽包含单位数）的 70%，因为 UPM 默认设置为 1000 单位，所以平均大写高度会是 700 单位。

所以，在你将图标拷贝粘贴到 Glyphs 中之前，在原始应用程序中将它放大到约 700 pt 大。

对于本篇教程来说，知道这些就可以了。如果你表示好奇，想了解更多关于在 Adobe Illustrator 和 Glyphs 之间移动矢量图形的内容，可以阅读从 Illustrator 中导入教程。

你也可以通过将 “文件 > 字体信息 > 其他设定 > 网格间距” 设为零，或将 “细分” 设为 10 或 100，从而减小坐标取整的错误。所有坐标值的取整都和这两项设置有关。

你会问，这里到底为什么会发生坐标取整？嗯，某些字体格式只支持整数的点坐标，并且整数坐标实际上会让路径编辑更加简单。

将图标放入字体中

好的，现在我们就准备好了我们的第一个图标。双击带有私用区编码的字符形，Glyphs 会打开新的编辑标签页，并将这个字符形置入其中。你的字符形看上去会像这样：

你看到了一系列线条，一个灰色的占位图形位于其后，下方有一个灰色的信息框。按下 Cmd-0 将字符形缩放到窗口大小。

线条被称为字符形量度线。下数第二条线是基线。你会想要将图标放在基线上。上数第二条线是大写字母高度线。默认是在 700 单位的位置。你要让你的图标达到这个高度。剩下的横线是上升部线（默认在 800）、x 高度线（500）和下降部线（-200）。你可以在 “文件 > 字体信息 > 母版” 中（或在 Glyphs Mini 中直接 “文件 > 字体信息”）更改这些值，但要保持它们在差不多的位置上。改动太大的话，之后可能会让你头痛。想要了解更多内容？在这里：竖向量度教程。

两条竖线代表左右边线，通常缩写为 LSB 和 RSB。两条线之间的距离称作 “字身宽度” 或直接说字符形的宽度。你可以通过底部的灰色信息框来更改它们。

占位图会在字符形中没有绘制内容的时候出现。所以，我们只需要在字符形中画上或粘贴上我们的图标：

要优化字体渲染的路径，请选择所有路径（或全部取消选择），并调用以下命令：“路径 > 修正路径方向”（Cmd-Shift-R），然后 “路径 > 添加极值点”，最后 “路径 > 清理路径”（Cmd-Opt-Shift-T）。在 Glyphs Mini 中，这些命令位于 “字符” 菜单中。如果你想知道更多关于怎样画出好的路径，请阅读绘制高质量的路径教程。

不要忘记通过在灰色字符形信息框的 “左” “右” 字段中输入数字来调整左右边距。如果你不知道什么数值比较好，就先把左边距和右边距都设为 50：

你可以在以后修改边距，甚至在字体选项卡中为所有选定的字符形批量设置。如果你想了解更多关于间距边距调节的内容（字体设计师称其为 spacing），请阅读字间距设计教程。

祝贺，你的图标字体中有了第一个图标！现在最应该保存你的字体（Cmd-S），并切换到文本工具（T）在完全抗锯齿的美丽状态下欣赏你的创作：

你可以再次编辑你的字符形：将光标置于字符形之前（即左侧），然后选择编辑工具（工具栏中的钢笔图标）或简单按下 Esc 键。

完美像素适配

像素适配的重要性完全是被过高估计了。但如果你真的真的需要做，那么请阅读完美像素适配教程。

批量创建字符形

你可以通过 “字符 > 添加字符形…”（Cmd-Shift-G，Glyphs Mini 中不适用）并输入其名称，通过空格或换行分隔，例如：

uniE000
uniE001
uniE002
uniE003
uniE004
uniE005
uniE006
uniE007
uniE008
uniE009
uniE00A

……诸如此类。一旦你按下 “生成” 按钮，字符形就会添加到你的字体。如果你打开了某个编辑标签页，它们也会插入你的测试文本中。

测试你的字体

理论上，你只需要通过 “文件 > 导出” 道出你的字体（详见下文）就可以了，不过……

试用未完成字体时有一个问题，名叫 “字体缓存”。讲真，在你决定测试字体之前阅读这两篇教程：首先，解决字体缓存问题，然后，如果你的 Mac 上恰好有 Adobe 应用程序，在 Adobe 应用程序中测试字体。

差不多我们遇到的每个其他方面的支持问题，都是字体缓存问题。所以，相信我，如果你仔细阅读这两篇文章，你的生活会轻松很多。如果你不这样做，悲伤和沮丧将会等待着你。请自行选择，真的，但别说我没有警告你。

导出网页字体

目前，Glyphs 仅能导出 OpenType 字体（还有 UFO 和 PHF，但格式和我们无关）。因此，将图标整合之后，选择 “文件 > 导出”（Cmd-E）并选择 “Webfont”。你现在可以选择你的格式，并设置为 “自动渲染提示”，如果你愿意的话。可用的格式为 OpenType/CFF 或 TrueType 到 WOFF、WOFF 2 和 EOT。你也可以立刻选择字体的保存位置：

我建议你转换两个版本：EOT 用于 Internet Explorer，尤其是 IE 9 之前，和 WOFF 2 用于所有其他浏览器。

将图标放到你的网页上

现在我们有了网页字体，怎么把这些图标放到网页上呢？我假定你知道如何为你的 EOT 和 WOFF 创建 font-face。如果你不知道，嗯，读一下这个和这个和这个或者随便其他什么你能在 Google 上找到的相关内容。

声明了 font-face 之后，在你的 CSS 中引入一个像这样的 pseudo-selector：

[data-icon]:before {
   font-family: "My Icon Font";
   content: attr(data-icon);
   speak: none;
}

HTML5 data 属性保持你的 CSS 通用，所以你不需要为每个图标声明额外的类，但是可以复用 data-icon。通过一个带有 aria-hidden 属性的空 span 在你的 HTML 代码中插入图标：

<span aria-hidden="true" data-icon= ""></span>

看到 data-icon 属性中的 Unicode 值 E000 了吗？这样，你的内容在语义上保持良好，因此，对屏幕阅读器友好。或者，更一般地说，不依赖设备。

漂亮。好好把玩你的网页字体吧！享受它比起像素图像（以及 SVG）解决方案所带来的速度提升。

感谢 Markus Greve，谢谢他在 tgm Webfontday 2012 上的出色演讲。

05-02-2016 更新：更新到 Glyphs 2

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