从 0 到 1 设计一套“书强”体甲骨文字体实践

最近刚好排查前端代码里面 iconfont 字体下载失败时是否会出现有歧义的乱码问题，刚好之前看过小朋友的甲骨文图案，觉得非常有趣，那么，能不能将甲骨文字体画上去生成字体显示出来呢？

创建一套自定义字体

这是一个比较专业的问题，正常情况下我们一般找设计小哥小姐姐直接要一套，不过我这是自己的需求，显然没法动用公司资源。

现在互联网上啥没有，都可以学？

掘金上面找了一篇高赞的文章《IconFont 的制作和在 Android 端的使用》，里面提到了《怒赞干货！Icon-font图标字体的四类制作方法》，从专业的到免费的都有介绍，一顿看下来，我差点从入门到放弃了。

字体制作需要比较专业的工具软件，比方 PS（PhotoShop） 和 AI（Adobe Illustrator），这个显然是付费的，而且价格不菲。免费的也有，但问题好像更多，短时间很难跑通。

花钱是不可能花钱的，我就是做着玩玩，本来也不挣钱，就图个乐。

我印象中应该是有个试用期，但是网上下载安装软件直接就是付款界面…

犹豫再三，最后再 Google 一下 PhotoShop 官网试试有没有试用版？

有 7 天试用期，而且 PS 和 AI 都有 7 天试用期，我机会来啦！

赶紧安装上 PS 和 AI 吧！

创建图标的确给我折腾了一些时间，我把上面甲骨文逐个截图并在 PS 里面用魔棒工具选中区域，复制到 AI 里面生成 SVG 图片，然而不好使，上传到 icomoon.io/app/ 和 www.iconfont.cn/ 均识别不了…

算了，不在这 PS 和 AI 的专业性上浪费时间了，有空找设计小哥小姐姐请教一下。

下载图标制作模板.ai，直接 AI 打开后用画笔工具简单画一个甲骨文图案，另存为 shang.svg 。注意事项参考阿里妈妈 iconfont 图标绘制。

以此类推，制作完成图片上其他 18 个图标，不赶时间的话可以加上自己的签名代号“SSU”和自己的“盛”，自嗨一下！

上传字体图标

在 www.iconfont.cn/ 创建个账号，然后进入“上传图标” 页面，上传本地 svg 图标，会等待审核通过，大概 10 分钟。

在“资源管理”Tab找到“我上传的图标”，点击图标加入购物车。

点击“购物车”图标，可以看到已加入购物车的图标，点击添加至项目。

打开“我的项目”可以看到自己添加的字体图标，点击“更新代码”后再点击“复制”，你将看到熟悉的前端使用图标字体代码。

在生成代码之前，我们可以修改一下图标字体 Unicode 编码为对应汉字编码，因为我们创建的“书强体”就是替代汉字的，而不是新建一些其他有意思的图标。

至此，我们制作成功了可以直接在前端使用的“书强体”，并获得了已发布到服务器的字体图标链接。

网页使用

直接上代码：

通过 @font-face 声明自定义字体，其中 font-family 定义了字体名称，如“jiaguwen”。

接着使用网上比较成熟的兼容性写法定义 CSS jiaguwen 类，在元素中通过 class=“jiaguwen”即可使用，该元素下的所有节点均会生效，对应上例中，对应的文字将会使用“书强体”。

有同学会很好奇怎么有个 “”，这其实是 h5 中对应 Unicode 码 “e615” 的转义写法，对应我自定义的图标 “SSU”。

打开网页“书强体”甲骨文「 js.jirengu.com/jugikujuxu 」 ,效果如下：

至此，大功告成！

Mac 安装字体

直接将字体下载到本地，点击 “iconfont.ttf” 文件安装。

打开“字体册”应用可以看到安装成功的“iconfont”字体。

接下来在文本编辑软件里面应用字体即可，比方说我用的是“Sublime Text” 和 “Keynote”。

最后来看看字体安装前后效果，直接复制过来然后设置字体。

科普知识点

Unicode 编码共有 3 字节，即0x000000 – 0xFFFFFF，可以表示 2 的 24 次方个字符，已录入约 100 万个字符，为世界上的每一个符号都给予一个独一无二的编码，可以通过 unicode-table.com/cn/blocks/ 查询字符对应编码。

按编码范围，你可以完全自己写个代码将所有 unicode 字符打印出来。

直接上代码：

也可以打开“全部 Unicode 字符网页” 「 js.jirengu.com/suxowujija 」 ，因为字符太多，会有点卡。

Emoji 字符（🤣🤗🤭🤩🤣🤗🤭🤩😀🫡🏀⚽🔯✡🆘🔞🚱🚳🚯🚷📵💯🆙🆒🃏🗯💭🏹⛳️🏈⚽️🏀🦅🦉☯🔯✡☸☪☣⚛☢🆎）也在 Unicode 编码中，还有一些看着像乱码的特殊字符（ ૮₍ ˊ ᵔ ˋ₎ა⁰̷̴͈꒨⁰̷̴͈꧁]ۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖʕ̡̢̡ʘ̅͟͜͡ʘ̲̅ʔ̢̡̢ ]ۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖ꧂ʕ̡̢̡ʘ̅͟͜͡ʘ̲̅ʔ̢̡̢‱🂡૮₍ ｡•.•｡₎ა）。

Unicode是变长编码，如果 2 字节能表示，则直接用2 字节，当 2 字节表示不下时才用 3 字节。

感兴趣可以看看阮一峰的《字符编码笔记：ASCII，Unicode 和 UTF-8》和梁月的《你需要知道的字体编码知识》。

字体编码还会涉及一些 base64 编码知识，感兴趣可以看看《一文读懂base64编码》。

字体兼容优先级，以及推进兼容次序，WOFF2 > WOFF > OFT/TTF（兼容性好但体积大），更多详见《不同的字体文件类型（OTF、TTF、WOFF、WOFF2）》和 《网页中用什么格式的字体 eof/svg/ttf/woff/woff2 ？》各自定义字体文件介绍。

全文完，如果觉得写得不错，那就点个“关注”或者“在看”。

如果转载本文，文末务必注明：“转自微信公众号：书强号”。

我是美团买菜前端盛书强，专注于大前端开发，欢迎和各位大前端大牛做朋友，教学相长。

文中相关代码已上传至 github.com/shengshuqia… 。