江苏龙网

  1. 首页 > 资讯 > 科技 > >

■Axure 教程：轻松导出图标字体所有图标

近几年图标字体使用非常广泛 ， 它的优点是可以自定义图标颜色、大小等参数 ， 且图标不会失真 。本文将教你轻松导出图标字体中的所有图标 ， 任你所用 。
■Axure 教程：轻松导出图标字体所有图标
文章图片

文章图片

一、问题来源
最近在集中整理一些原型、元件、框架或者素材等设计规范 ， 在整理的过程中 ， 遇到一个比较棘手的问题：当在 Axure 中选择一个图标字体时 ， 没有办法直接通过字符 ， 将我们想要的图标打出来 。
例如如果想在 Axure 中使用“加号”的字体图标时 ， 只有三种方法能搞定：办法 1：从其他的图标字体库中直接复制粘贴；办法 2：从系统字体中复制粘贴；办法 3：导出该字体图标的 svg/png 图片文件 ， 再复制粘贴 。
■Axure 教程：轻松导出图标字体所有图标
文章图片

文章图片

尽管这三种方式都能满足正常使用的需求 ， 但对应的也会存在三个问题：问题 1：很难找到其他全面的图标字体库文件问题 2：系统字体库中只能单个复制 ， 无法批量复制 ， 工作量太大问题 3：svg/png 图片下载后无法随意改变图标颜色或大小 ， 不方便制作交互样式
所以这些问题的出现产生了一个需求：如何将图标字体中的所有字体批量导出到 Axure， 变成一个个可以直接编辑的字体图标？
■Axure 教程：轻松导出图标字体所有图标
文章图片

文章图片

本文将以知名图标字体 Ionicons V5.0.0 为例 ， 来跟大家介绍一种简单直接的方法 ， 巧用百度字体编辑器来轻松批量导出 。
二、解决办法2.1 预览复制
首先可以在 Ionicons 官网下载字体 TTF 格式字体文件 。下载完成后 ， 打开百度字体编辑器 FontEditor， 直接将刚才下载的 TTF 文件拖入编辑窗口 。
在正常文件没有损坏的情况下 ， 拖入后编辑器会直接显示所有字体中的图标：
■Axure 教程：轻松导出图标字体所有图标
文章图片

文章图片

此时如果没有其他特殊的需求 ， 一般不需要对任何图标做格式或形状上的处理 ， 直接点击右上角预览按钮 ， 选择预览 TTF 文件即可 。
例如下图就是预览后的页面 ， 可以看到这个页面就可以直接批量复制了 ， 也就解决了上述第二个没办法批量复制的问题：
■Axure 教程：轻松导出图标字体所有图标
文章图片

文章图片

注意 ， 不要忘记复制到 Word 后 ， 需要选择对应的字体格式才能正常显示字体图标 。
2.2 集中处理
通过 2.1 节的操作后 ， 我们已经将所有字体图标复制到 Word 中了 。但可能由于字体文件的设置或者 FontEditor 的预览规范 ， 会发现复制后图标下方会有图标名称和图标十六进制代码 ， 而且每一行只有一个图标 ， 十分不方便查看 。
显然 ， 此时不可能挨个去每行编辑 ， 毕竟可能有成千上万行 ， 那如何批量处理格式呢？这就要体现 Word 的强大了 ， 我们可以通过高级替换功能轻松搞定 。
这里用到的高级替换有两种：换行替换：处理掉换行；通配符替换：处理掉具有规律的文本 。
先来看换行替换 ， 在 Word 中 ， 换行符也就是段落标记是 ^p ， 我们只要替换成空即可（注意并不是替换成空格）：
■Axure 教程：轻松导出图标字体所有图标


推荐阅读


上一篇：『』小米果然起来了

下一篇：[万物]华为云专家深度解读：万物互联的智能时代，云原生技术与边缘计算将擦出怎样的火花？