iconfont技术调研
iconfont出现背景
正常的Web/App页面包含众多的元素,关于图片部分主要分为三种样式,背景图(大)、插图(中)、图标(小)。三个样式元素会在不同的环境中出现不同的问题,而iconfont就是解决图标问题的解决方案之一。
图标出现的问题
- 图标大小会变,在两种情况下:
- 每次UI改版,UI设计师改变图标大小
- 自适应页面
- 图标经常变
- 图标自身改变
比较SVG
相比较{SVG},由于iconfont是基于SVG,性能方面相差不多,但在iOS使用时,自己的dom解析太过于麻烦,所以需导入SVGKit,大小为6.4M。(SVG关键字说明)
iconfont
iconfont定义:
Iconfont(图标字体)就是把一些简单的图标制成字体,然后让图标的使用和字体一样。
iconfont优势:
- 灵活性
改变图标的颜色,背景色,大小都非常简单 - 兼容性
兼容所有流行的浏览器,H5和App均可使用,SVG的加载需要依赖第三方库,iconfont自身系统支持 - 高效性
iconfont有矢量特性,没有图片缩放的高消耗
iconfont劣势
- 制作iconfont需要SVG设计稿,没有图片方便
iconfont使用
第一步:将您从IconFont平台下载的字体文件(.ttf)添加到工程中;
打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“
第二步:使用IconFont字体:
'' UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
'' UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
'' label.font = iconfont;
'' label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
'' [self.view addSubview: label];
iconfont在项目中应用
减少包大小
网上部分人做的测试
iconfont性能
加载速度非常快,可以忽略不计,iphone5手机平均加载一个在5ms左右