IconFont在iOS中的运用

李现科 2019-02-14 10:14:53 1772

IconFont技术起源于Web领域的Web Font技术。随着时间的推移,网页设计越来越漂亮。但是电脑预装的字体远远无法满足设计者的要求,于是Web Font技术诞生了。一个英文字库并不大,通过网络下载字体,完成网页的显示。有了Web Font技术,大大提升了设计师的发挥空间。(原文链接)

哪里可以找IconFont

官网提供了大量的IconFont可供选择,也可以由设计师制作。地址如下:

https://www.iconfont.cn

这里还有一些其他的选择:

https://www.easyicon.net
http://fontello.com
https://icomoon.io

如何导入

如果其他自定义字体一样,导入工程的步骤如下:

  1. 将字体文件拖入项目中

  2. 在info.plist设置支持的三方字体

    image.png

    plist设置

  3. 如若找不到可在工程设置Build Phases标签下的Copy Bundle Resources中查找确认,或者清理build的cache(Shift+Command+K)

如何使用

如同使用三方字体一样,iconfont可以通过fontfamily,以及对应的Unicode来使用。代码如下:

label.font = UIFont(name: "iconfont", size: 14.0)
label.text = "\u{e6e6}" // 这里的Unicode编码参照从iconfont网站导出的文件
label.textColor = .red

如果需要显示为image,使用Quarts 2D绘制然后获取上下文的图片。这里推荐使用淘点点的iOS团队完成的TBCityIconFont工具库,使用非常简单。先把库集成进入项目,再全局设置字体:

TBCityIconFont.setFontName("iconfont")

然后按照编码,字号和字色生成图片:

let info = TBCityIconInfo(text: "\u{e61a}", size: 24, color: .red)
imageView.image = UIImage.icon(with: info)

进阶使用

以上内容是查阅资料总结所得。在实际项目使用中,我发现在Interface Builder中使用iconfont极其麻烦。于是摸索出如何直接在IB中设置iconfont。

  1. 设置字体为Custom-iconfont

  2. 设置需要的字号和字色

  3. 设置文字为相应的Unicode编码

这里的第三步需要展开说明一下,由于一般输入法无法输入非官方Unicode编码的文字。我们需要使用Mac自带的Unicode输入法来输入。先把Unicode输入法开启并切换,如下:image.png

添加Unicode输入法

需要键入相应的编码时,只需按住Option键,然后依次输入编码,生成的Unicode文字为问号图案。由于系统无法识别对应的编码,无需理会,只要把文本复制到IB中即可。这里有一点需要注意,由于键入过程可能会触发快捷键,最好在比较纯净的文本编辑器操作。

如果嫌弃键入麻烦的也可以借助如下网站生成(可能需要科学上网):

https://unicode-table.com/en/search/?q=e6ff

如果需要在IB的富文本中选择iconfont的字体,需要将字体拖入Mac的字体册(Font Book)

后记

理论上图片也是可以直接设置的,需要借助IBDesignable,这里就不展开讨论了。另外类似R.swift可以对文本进行资源管理,非常适合iconfont这种场景,由于并未实践也不展开讨论了。

作者:李现科

链接:https://www.jianshu.com/p/d63f25edfa0f