" .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
- b.使用11个图标生成的字体占用空间4k
*当前是139k与4k的区别,当图标的量越大, 同一图标状态越多,此差距就会越明显
2. 使用指南
1). 使用.svg矢量图标 生成图标字体
打开网页https://icomoon.io/app/#/select, 点击Import Icons
可以看到生成的图标:
2). 导出字体
(1)点击右下角的Generate Font
生成font
(2)点击Download
下载生成的font 字体
上图中标识的 1 是 图标的模样 ;2
e900
是图标生成的字体的名字
下载的字体库如下:
3). 导入工程
将icomoon.ttf导入工程中, 并配置plist文件, 导入字体库,如下图:
4). 使用
(1)使用方式, 跟文字同, 可以设置大小, 设置颜色
效果如下:
(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"
以上仅是个人使用总结,欢迎批评指正补充~~~~~~~