【硬核科普】如何开发一款字体

字体这一词在开发中有不小的占比和使用场景，如在 VIM 这类的编辑器中，我们会使用诸如 nerd-fonts^[1] 这类字体增强显示，比如 icon 等。

在视觉传达的角度来考虑，发展到一定企业或团队、组织单位等会开发和设计自己的字体。甚至是一些大型的活动，也会定制属于自己的一款自己，比如最近的北京 2022 年冬奥会，就定制了其专属字体。

每年。这些有钱的大公司或精致的小公司，都在字体这方面下了很多功夫且耗资巨大。

在我国，有方正字库这种大型的字体设计公司，几乎我们每台搭载 Windows 系统的机器都会使用方正字库设计的微软雅黑字体。

如果你不幸在设计中使用了微软雅黑，那么方正字库就会控告你侵权，从而获取高额的赔偿。但微软雅黑本身就是作为微软且周边生态的默认字体。

不止微软雅黑，你能看到的我国一些知名企业。如 360、京东、淘宝、美团、抖音、喜茶、少林寺、vivo、阿里健康体、HONOR Sans、IQOO、携程、美的、中国美术学院的进道体、小米兰亭、甚至是冬奥会、可口可乐、新华社的新闻体，都是方正字库所进行设计和开发的。

但也有像是思源黑体、思源宋体、站酷酷黑体、昭明黑体、原石黑体等一系列开源的字体。您可以在 中文开源字体集^[2] 中看到这些伟大的项目。

我国也有很多关于字体的谚语。如：“见字如面”、“字如其人”、“一字千秋”。甚至是：“八字没一撇”。你可能不知道宋徽宗，但你一定知道徽宗手下的 “瘦金体”。即使不知道宋徽宗，那你肯定也知道王羲之、颜真卿这种书法大家。

比如在小时候我们写字的时候，因为我比较喜欢写连笔字（还丑），也会被老师和父母冠以 “龙飞凤舞” 的成语阴阳我几句。

有趣的是，Windows 的开机时下面的加载动画，也是通过字体进行封装而设计的。这种操作其实大量运用在 Icon 中（因为方便且快那么一点点）。

那我们普通人，如何拥有自己的一款字体呢？本文借着为江雪设计的一款「清文」字体而进行延伸。

字体是如何设计的呢？

首先要理解字体如何设计，必不可少的就是设计理念。也就是你为什么要设计一款字体，且你的需求是什么？最起码是看起来是什么样的？

先确定好了需求，接下来就是设计角度和方法。本文以等衬体为例。

在上图中，我们可以发现，每个字体都是由 9x9 的方块演变而来，并且限制了高度和宽度，也就是 91 的宽度 61 的高度。

通过这样的设计，我们得到了一个看似很科幻的字体设计稿。但这仅仅是字体设计的第一步。

注意，在字体设计中，无论你使用 Adobe Photoshop 还是 Adobe Illustrator，甚至是 Figma、Adobe XD、Sketch 这些设计软件，都可以完成 SVG 的设计。

退一步说假设你是一个有着严重开源洁癖的人，那没问题！我们也可以使用 GIMP、Krita、Inkscape。

无论你使用什么，只要能导出 SVG 就可以进入下一步。

字体有了设计理念和规格，下一步？？

在第二步中，我们需要将字体的设计稿，转换为字体，也就是通过字体设计软件，将 svg 复制到对应字体的 Unicode point 中。

在这个过程中，我们需要使用 birdfont^[3] 完成这一最终步骤。

庆幸的是，这样一款优秀的字体设计软件，它是通过 GNU GPL v3 协议开源的，你可以 点此查看它的仓库^[4]。

可惜的是它经历了 3000 多次提交，但只有 400 star。这是因为作者将大量的时间投入到了 code 中，而没有过多的时间运营社区。

在打开软件时，它会提示您想要创建一款商业字体还是根据 SIL Open Font 许可证的字体？

需要注意的是，著名的 Google Fonts^[5] 字体，也是通过 SIL Open Font 许可证进行分发的，这意味着您可以免费使用（包括在商业项目中使用，而不追究版权）。限制时您不可以出售使用 SIL Open Font 字体许可的字体。

其实这个步骤超级简单，您只需要将设计好的 svg （最好在 svg 中包含间距）复制到 birdfont 中，然后进行调整即可。

最后，当您为必要的字符设计好时，比如 25 个字母和 0～9 的数字，以及一些特殊符号。这时您可以在 birdfont 中设置字体的名称和描述，导出为 ttf 即可。

具体的您可以参考 Tsing-font^[6] 字体，它不仅将字体通过 SIL Open Font 免费分发，还公开了其 Figma 的设计文件^[7]

甚至是 birdfont 设计源文件^[8] 也在其仓库中。

该字体提供了一个简单的网站来进行展示其字体的样式。我想您可以通过 Tsing font 这款字体，来了解字体设计的流程和从设计到可以应用到这一阶段。

如何使用字体？

如果您到了最后一步，也就是导出了 ttf 文件，那么您需要做的就是安装。有趣的是每个系统都会有自己的一段字体预览描述。

比如 Ubuntu 的字体测试内容就是 “I can eat glass, it doesn't hurt me（我可以吃玻璃，它不会伤害我）”，而 Windows 上有的机器显示的是：“中国制造，汇集全球 Made in China……）”

我很期待你的系统字体测试内容是什么？或许你可以在评论区中分享下。

安装好了字体就是使用，我们展现下在 Figma 看看我们自己做的字体是什么样的？

非常棒！我们的字体可以使用，并且我们还可以通过为字体加入描边的方式，让其变得粗一点，视觉效果看起来更棒！

作为一个前端领域专注于 CSS 的公众号，虽然我们的字体不支持可变（也就是粗细可变）但。我们可以通过 CSS 特有的特性 -webkit-text-stroke 实现为字体加粗！

-webkit-text-stroke 的支持性非常好，以至于目前所有的浏览器都支持它的显示，因此这也可以让我们的字体在前端呈现时，是可以保证字体的粗细可变的。

字体的显示问题

在写 CSS 的时候，最害怕的一定是 CSS 元素在各个浏览器的适配性。上述我们生成了 TTF 文件，可能我们在本地环境中的 Chrome、Firefox、Safari 等浏览器都是可以正常显示的。

但放到生产环境，Firefox、Safari 可能显示不了我们的 TTF 字体，需要通过一些工具进行转换，比如 Convertio 这样的在线工具，同时在 @font-face 中添加它们：

@font-face {
  font-family: "Tsing";
  src: url("Tsing.woff2") format("woff2"),
           url("Tsing.woff") format("woff"),
           url("Tsing.ttf") format("truetype");
}

至此字体制作的流程就到以尾声。但真实的情况是，在字体设计完后还需要有很长的一段时间根据该字体设计一些海报和字体演变的视频，结合到其该品牌的视觉系统中。但由于我们是做个字体自己用，所以就可以减少一些视觉传达和营销层面上的设计包装。