iconfont

时下App越来越向重型App发展,随之带来的就是App容量剧增。

而App中五花八门,各式各样的图标图片也是容量增大的帮凶之一。

而使用iconfont代替图片可以缓解这一问题。

了解iconFont

iconFont是什么?

是一种使用字体文件取代图片文件,来展示图标/特殊字体等元素的方法.

为什么iconFont比图片占用更少的内存?

这要从计算机绘制图片的两种方式来分析。

位图(详情点击查看):亦称点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。

矢量图(详情点击查看):也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

iconFont的优缺点

优点

1、图片统一管理，避免png分散管理带来的不便

2、占用内存小、占用存储空间小

缺点

1、只支持纯色图片

2、开发过程，所见即所得方面，对于研发不够友好，需要借助映射表

使用方法

通过阿里巴巴矢量图标库制作自己的iconFont字体

1、打开阿里巴巴矢量图标库,添加自己的项目

2、搜索或自制矢量图标上传

3、将图标添加到购物车

4、将购物车中的图标添加到自己的项目中

5、选择打包方式为Font class 并下载

6、将 .ttf 后缀字体文件拖入工程中,并在demo_unicode中查询到字体对应的Unicode码 将ttf文件拖入iOS工程

iOS代码实现

1、注册字体文件

+ (void)registerFontWithURL:(NSURL *)url {
    NSAssert([[NSFileManager defaultManager] fileExistsAtPath:[url path]], @"Font file doesn't exist");
    CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url);
    CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider);
    CGDataProviderRelease(fontDataProvider);
    CTFontManagerRegisterGraphicsFont(newFont, nil);
    CGFontRelease(newFont);
}

2、生成image对象

+ (UIImage*)imageWithIcon:(NSString*)iconCode inFont:(NSString*)fontName size:(NSUInteger)size color:(UIColor*)color

{

 CGSize imageSize = CGSizeMake(size, size);

 UIGraphicsBeginImageContextWithOptions(imageSize, NO, [[UIScreen mainScreen] scale]);

 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, size, size)];

 label.font = [UIFont fontWithName:fontName size:size];

 label.text = iconCode;

 if(color)

 {

 label.textColor = color;

 }

 [label.layer renderInContext:UIGraphicsGetCurrentContext()];

 UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();

 return retImage;

}

iOS性能测试结果统计

滚动视图绘制1000个图片，分别使用png和iconfont做性能对比。

截图时：

1、iconfont均是第一次完成注册、出图。

2、均是相应case的第一次上屏。

iconfont未做缓存

图片尺寸	PNG	iconfont
32 * 32
64 * 64
200 * 200

iconfont做了缓存

图片尺寸	PNG	iconfont
32 * 32
64 * 64
200 * 200

Android性能测试结果统计

数据基于同一个设备HUAWWEI NOVA4和同样的图标（常规大小）测试。

小结：

1、iconfont第一次完成注册、出图时，内存消耗较多。

2、iconfont不做缓存，耗时较长。

3、iconfont做了缓存，和png完成1000张图绘制时耗时相近。

4、ttf文件不大的情况下可以考虑缓存，用空间换时间。