如何通过JavaScript将图标字体转换为图片进行渲染？

本文共计1945个文字，预计阅读时间需要8分钟。

前言：在软件开发中，经常需要使用到图标。例如，在Groove音乐软件中，就使用了大量图标。获取这些图标的一种方法是，将Groove音乐截图，然后使用Photoshop进行编辑，开始粘贴图片。这种方法较为直接。

前言

在软件开发中肯定要用到图标，比如下图的 Groove 音乐中就用到了许多图标。一种获取这些图标的方法是把 Groove 音乐截个图，然后熟练地开启 Photoshop，开始抠图。这种方式很逊，效率也很低（虽然我刚开始就是这么干的）。

如果打开 C:/Program Files/WindowsApps（需要修改权限才能进入），可以发现几个名字里带 ZuneMusic 的文件夹，其中的某一个文件夹中会有字体文件 SegMVR2.ttf。这是一个图标字体文件，双击安装之后，打开 Windows 自带的字符映射表应用，将字体换为 Segoe MVR MDL2 Assets，可以看到里面的字符其实就是图标。其实可以用 Metro Studio 将这些字体导出为 png、svg 等格式的图片，但是 Metro Studio 导出的字符看起来很细，也无法分别控制上下和左右的内边距，所以这里改用 Javascript 操作 canvas 绘制图标，然后导出为 png。

实现方式

在 CodePen 上已经有人给出了将 Microsoft 开源的 Fabric UI Icon 渲染为 png 图片的 demo，效果很不错。