怎样在iOS中使用icon-font？

这是一篇写给 iOS 开发的文章(教程)。

icon 和 font 拆开来看应该所有人都认识它是什么意思，iconfont就是这两者的结合。严格的说，我们平时使用的字体，并不是我们传统认知中的文字，而是一个一个的图标。是由在坐标系中各种点，连起来组成的。babala….. 这也是我们平时使用的字体无论放到多大，都不会出现在图片上面出现的因为拉伸而出现的失真的情况。

iconfont 实际上就是吧我们在项目中要使用的各类 icon 按照相同的原理制作成一个字体库，然后用使用 font 的方式来使用。

说的挺乱，反正大概就是这么个意思吧。

效果图

测试的时候随便截了一个图

icon-font 解决了什么问题

解决一个图标要同时适配PC 移动端和 retina 的问题

在现在扁平化设计大行其道的大环境下，拟物化设计推崇的写实以及高光纹理之类的元素也基本上都被现在的设计师们舍弃掉了，这也为 icon-font 的应用提供了基础。

优点

减少应用体积，字体文件比图片要小

图标保真缩放，解决2x／3x的问题

方便更改图标颜色大小，阴影，图片复用

一套图标资源可以在不同平台使用(安卓、iOS、web)

资源维护方便

缺点

需要自定义svg图片，并将其转换为ttf文件，图标制作成本比较高

添加图标是需要重新制作ttf文件

只能支持单色(不支持渐变色图标)

(以上内容来自没故事的卓同学在趣直播的分享)

原理

这个很简单，就是利用 svg 矢量图制作字体库

准备工作

阿里的iconfont.cn
svg 文件，svg 的制作其实是由设计师完成的，我们只需要让设计师提供合适的 svg 而不是2x3x图片。就可以了。

step 1

在iconfont.cn注册并登录。

注册完成后点击图标管理，我的图标，然后上传准备好的 svg 文件。

然后切换到我的项目

点击右边的添加，创建字体库。

红圈内的内容就是接下来要用到的fontName

接下来

还记得我们第一步上传的图标名字吧！

在右上角搜索哪个名字，然后就出来了刚刚上传的图标

加入购物车之后

右上角购物车上应该出现了 badge吧。

点击这个图标

因为我已经添加了 ps_shop_icon所以我就随便选了一个。

回到我的项目

点击下载至本地

下载之后你会看到一个 .ttf 文件。

将这个文件拉到项目中

接下来就是要在项目中操作的事情了。

step 2

在info.plist 文件中添加如上内容。

然后

在 Build Phases中检查一下

如果没有就删掉重新拉进项目吧！

或者点击最下面手动添加。

step 3

在代码中找一个label

1
2
3

label.font = [UIFont fontWithName:@"dph_fonticon" size:20];
label.textColor = [UIColor redColor];
label.text = @"\U0000e601";

代码中的dph_fonticon 就是在iconfont.cn的项目中设置的font-family名字

\U0000e601是在iconfont.cn 中对应

图片中的&#xe610 这个是给前端用的，在iOS上对应的将&#x更换成\U 然后补0 保证unicode 为8位就是了。

现在运行一下代码，就能看到对应的值已经改变了。

Xib

如上图。

那个问号需要将下载下来的.ttf文件导入本体的一个叫做footbook的app中（直接拖进去就ok）

然后就可以复制粘贴了。

总结

iconfont 这种技术好几年前就已经出现了，现在也已经出现在了阿里的大部分产品中，可见iconfont的技术也是十分成熟的，为了给安装包瘦身，开发者们也做了很多的努力，作为占用资源非常多的图片文件，使用 iconfont 确实能够给 app 减肥。这对于像淘宝、支付宝之类的巨无霸 app 来说就显得尤为重要了。

后期在公司 UI 的帮助下，准备在公司几个项目中小范围的实验一下这个方法。检验一下 iconfont 能在项目中带来多大的便利。