iconFont 使用笔记

" .svg" , "iconFont" 这样的词汇在网页开发中经常用到，其实，在APP的原生开发中，它也可以拳脚大施

1. iconFont的自我介绍

iconFont是图标字体， 顾名思义，就是把图标从图片转化为字体， 以自定义字体的方式使用.

什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
此处参考: http://www.w3school.com.cn/html5/html_5_svg.asp

使用.png 图片进行渲染，为了适配不同的设备，我们需要准备两套图片@2x.png, @3x.png， 如果需要不同的状态如： normal（常规）, hightLight（高亮）, unable（不可操作） 等则需要 2 * n张图片, 不仅增加了UI人员工作量， 也增加了APP包的大小。

举个例子：

• a. 使用11个图标（包含@2x.png, @3x.png）一共139k

72B9E4A6-CF13-4AE3-9763-9CAE55E6CB20.png

• b.使用11个图标生成的字体占用空间4k

F5ED11B6-0ADE-48A4-A00F-AB46AE8F6985.png

*当前是139k与4k的区别，当图标的量越大， 同一图标状态越多，此差距就会越明显

2. 使用指南

1). 使用.svg矢量图标 生成图标字体

打开网页https://icomoon.io/app/#/select， 点击Import Icons

C3F18E04-7CC7-407D-91B7-ED0E48085794.png

可以看到生成的图标：

F1248736-4765-4B3E-8B6B-75D8C290DC92.png

2). 导出字体

（1）点击右下角的Generate Font生成font

876DA01C-86C8-4282-90FF-1D81B78BBEB7.png

（2）点击Download下载生成的font 字体

2E64FF59-563A-48A4-8E4D-30712A67FA0D.png

上图中标识的 1 是 图标的模样 ；2 e900是图标生成的字体的名字

下载的字体库如下：

894BDC98-185B-4DF2-B700-C605F4B48C17.png

3). 导入工程

将icomoon.ttf导入工程中， 并配置plist文件， 导入字体库，如下图：

48904081-4F9B-4345-BB15-3E5C0102F10B.png

4). 使用

（1）使用方式， 跟文字同， 可以设置大小， 设置颜色
效果如下：

FE7C7BC9-DD04-4FBD-9E4D-9A9B52456D57.png

（2）代码

label1.font = UIFont.init(name: "icomoon", size: 20)
label1.textColor = UIColor.red
label1.text =  "\u{e900}"
        
label2.font = UIFont.init(name: "icomoon", size: 24)
label2.text = "\u{e903}"
        
label3.font = UIFont.init(name: "icomoon", size: 30)
label3.textColor = UIColor.blue
label3.text = "\u{e907}"
        
label4.font = UIFont.init(name: "icomoon", size: 40)
label4.textColor = UIColor.green
label4.text = "\u{e908}"

此为swift中用法 "\u{e908}"
OC 中用法 @"\U0000e908"

---

以上仅是个人使用总结,欢迎批评指正补充~~~~~~~