阿里IconFont平台
http://www.iconfont.cn/
这里是阿里巴巴UED部门开发的IconFont平台,目前阿里系的重量级产品都在使用,里面有很多资源可供使用。这里说说如何在客户端内使用。
IconFont虽然看起来是图标,实际原理跟字体的实现方式是一样的,所以我们把每个Icon当作一个特殊的文字来理解和处理。
IconFont使用
- 首先登录网站,搜索你要用的Icon,把它们加入购物车(点击就可以)。
- 把购物车里的所有Icon存储在同一个项目中。
- 进入项目,选择“下载至本地”。
- 打开下载的文件,里面有一个*.ttf文件,我们需要的所有字体就都在这里了。
- 把.ttf文件放入项目,当使用时,把TextView(Android)或UILabel(IOS)的Font设置为加载.ttf生成的自定义字体。这里有个问题,怎么指明我们要显示哪一个Icon呢?
- 下载一个字体编辑软件,我在Mac上面使用的是FontLab Studio,打开*.ttf,找到每个图标对应的Unicode值,以”\ue600”这种形式赋值给TextView(Android)或UILabel(IOS)中的文本。就可以了。
-
导入字体文件
将字体文件拖入项目(ios支持的字体格式有:.ttf、.otf,其他格式不确定)
-
配置iconfont
将.ttf文件添加到Xcode项目中去,在Build Phases配置中确保可以看到导入的文件。
之后在项目的info.plist中,添加Fonts provided by application字段。这字段是一个数组,可以为项目添加多个字体集。
-
找到图标对应的unicode码
使用FontLab Studio 5工具打开字体文件(比如fontello.ttf),就可以看到图标与unicode码之间的对应关系啦。
- 项目中使用
let backBtn = UIButton(type: UIButtonType.Custom)
// IconFont使用
backBtn.titleLabel?.font = UIFont(name: "yunyou", size: 30)
// backBtn.setTitle("", forState: .Normal)
// Swift使用unicode码
backBtn.setTitle("\u{E64B}", forState: .Normal)
backBtn.titleLabel?.textAlignment = .Left
backBtn.setTitleColor(UIColor.grayColor(), forState: .Normal)
IconFont优势
- 图标集中处理,避免重复资源,设计师只要说明Color、Size就可以了。
- 减少包大小,每个IconFont只是一小段文本,文件大小要比图片形式的icon小一个数量级。
- 节省内存,IconFont与普通文本一样是使用矢量图的方式绘制的,相比图片的内存分配方式,消耗的内存可以忽略不计了。