您的当前位置:首页正文

开发没切图怎么办?矢量图标(iconFont)上手指南

来源:花图问答

需求:有时候我们自己想独立开发一些App,但苦恼没有设计给icon切图?
这可怎么办?
今天我们来介绍一种比较高效且高质量的替代方案:使用矢量图标 —— iconFont

一、iconFont简介

二、iOS端简单使用指南

第一步:

  • 挑选统一风格的icon
挑选icon
  • 全局搜索想要的icon
全局搜索
  • 将需要使用的icon加入到购物车
加入购物车
  • 下载代码
下载代码

第二步:

解压下载的压缩包,注意demo_index.htmliconFont.ttf文件。打开工程将ttf导入到项目中,并在info.plist中配置。

  • 压缩文件,找到demo_index.htmliconFont.ttf
文件
  • iconFont.ttf文件导入项目:
导入项目 添加字体

第三步:

打开demo_index.html预览iconFont所对应的Unicode编码。并在项目中应用。

  • 打开demo_index.html文件
  • swift使用方法如下,用格式\u{编码}使用Unicode编码
//...
label.font = UIFont.init(name: "iconFont", size: 26.0)
label.text = "\u{e658}"
//...
  • Objective-C使用方法如下,用格式\U0000编码使用Unicode编码
//...
label.font = [UIFont fontWithName:@"uxIconFont" size: 34];;
label.text = @"\U0000e658";
//...

这样,在没有设计提供切图的情况下,就可以用LabeliconFont字体代替切图达成ImageView的效果了。

三、iconFont原理

先把icon通过像素点描述成自定义字体(svg格式字体),然后打包成ttf格式的文件,再通过对应的unicode对应到相关的icon

四、可能遇到的一些问题

  • ttf文件导入冲突问题:

解决方案:用一些工具修改字体名,再导入多个ttf文件。(记得在info.plist文件里配置)

  • Unicode变化问题:

尽量使用一个账号下载ttf资源,不同的环境下可能会导致生成的Unicode不同。从而给项目替换icon带来成本。

  • 版权问题:

iconFont目前应该不支持商用,除非有特别的许可。
自己独立写一些小项目的时候可以使用。


了解更多iOS及相关新技术,请关注我们的公众号: