如何通过JavaScript将图标字体转换为图片并详细解析实现过程？

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

目录+前言+实现方式+HTML+CSS+JS+效果+前言+在软件开发中，确定要使用图标，例如Groove音乐中的多个图标。一种获取这些图标的方法是将Groove音乐截个图，然后熟练地开启它。

目录

• 前言
• 实现方式
• html
• css
• js
• 效果

前言

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

如果打开 C:/Program File/WindowsApps（需要修改权限才能进入），可以发现几个名字里带ZuneMusic的文件夹，其中的某一个文件夹中会有字体文件 SegMVR2.ttf。这是一个图标字体文件，双击安装之后，打开 Windows 自带的字符映射表应用，将字体换为 Segoe MVR MDL2 Assets，可以看到里面的字符其实就是图标。