创建图标网页字体

教程
作者:Rainer Erich Scheichelbauer
en zh

5 二月 2016 发布日期: 23 三月 2014

Turn your icon sets into webfonts, and have faster and better looking webpages!

几乎所有的最新网页浏览器都可以显示网页字体。因此,最好将你的图标转换成字体而不是 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+0000U+FFFF)的这一个。BMP 中的私用区范围是 U+E000U+F8FF

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

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

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

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

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

关于字符形名称再说一句。只能使用大小写的 ASCII 字母,即 A-Z 和 a-z,或许名称后面还有数字(0-9)。 空格是不允许使用的,名称也不能以数字开头。所以,homeIconloginIcon 是 OK 的,但类似 home buttonMä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 (三言).