利用ttf字体库给App瘦身

image

前言

自从4.7、5.5屏幕的iPhone出来之后,我们在做iPhone适配上就开始头痛了,他开始有@2x、@3x图了,这无疑增加了App的安装包的体积了,那么有没有好的方法去解决这个问题呢?在这我介绍一种使用TTF字体库替换使用图片方式。利用现在的时间整理一份TTF使用文档,希望能帮助到大家。

为什么选择ttf字体库

首先我问一下大家,如果看到以下的设计,大家会怎么做呢?

image

图1

如上图所示的红色区域,一般情况下,我们会使用一个imageView后面加一个label,再接着imageView,最后时间又是一个label,这样使用不仅创建的控件多,而且还要设置它们的相对位置,非常繁琐。但是我们可以使用字体库简单解决,示例代码如下:

UILabel *addressLabel = [[UILabel alloc] initWithFrame:(CGRect){80, 33, 40, 21}];
addressLabel.textColor = kColorWithRGB(0x666666);
addressLabel.text = @"\ue601 北京   \ue600 4月23日 12:00";
addressLabel.font = [UIFont fontWithName:@"iconfont" size:14];
[self.contentView addSubview:addressLabel];

所以使用字体库图标可以带来如下的好处:

  1. 减少资源所占内存。如果你使用TTF字体库的图标就是一个个文字,而使用图片就需要单倍图、@2x、@3x三张图片。
  2. 使用方便。ttf字体库的使用规则就像我们使用的文字一样(具体如何使用将在下面介绍到),我们还可以根据字体的颜色自由设置图标颜色,而不需要重新要UI切图。
  3. UI切图也方便,不需要切多套图。

注:ttf适合范围只是单色的图标,如果是多色彩图片还是需要选择图片。

如何使用ttf字体库

1. 创建ttf字体库

在这里我向大家介绍一个生成一个字体库平台—— 阿里巴巴矢量图标库,在这里有许多现成的图标库,你可以选择你需要的图标然后生成一个ttf库,具体可参考 ICONFONT平台功能介绍

2. 查看ttf字体库名称

双击iconfont.tff文件,能看到弹出了以下的一个字体弹框。用红色框住的就是字体库名称。

image

3. 使用ttf字体库

  1. 将xx.ttf字体库加入工程里面

    image

  2. 在工程的xx-Info.plist文件中新添加一行Fonts provided by application,加上字体库的名称。

    image

  3. 引用字体库的名称,设置字体:

A、 Label使用ttf

UILabel * iconFontLabel = [[UILabel alloc] initWithFrame:(CGRect){100, 60, 200, 40}];
iconFontLabel.font = [UIFont fontWithName:@"fanghuwang" size:20];
iconFontLabel.text = @"\ue62a 这是一个iconfont";
iconFontLabel.textColor = [UIColor redColor]; // 设置字体的颜色
[self.view addSubview:iconFontLabel];

B、Button 使用ttf

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.titleLabel.font = [UIFont fontWithName:@"fanghuwang" size:20];
button.frame = (CGRect){100, 120, 160, 40};
[button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[button setTitle:@"\ue61d iconfont Button" forState:UIControlStateNormal];
[self.view addSubview:button];

注: 如果不知道字体安装是否成功,可以遍历字体进行查询:

 NSLog(@"familyNames:'%@'",[UIFont familyNames]);

4. 使用ttf字体库创建图片

// 使用iconfont创建图片
+ (UIImage *)imageFromText:(NSString *)text fontSize:(CGFloat)fontSize color:(UIColor *)color {
    UIFont *font = [UIFont fontWithName:@"fanghuwang" size:fontSize];
    CGSize size  = [text sizeWithAttributes:@{NSFontAttributeName : font}];//[text sizeWithFont:font];
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(ctx, color.CGColor);
    CGContextSetShouldSmoothFonts(ctx, YES);

    CGContextSetShouldAntialias(ctx, YES);
    CGContextSetLineWidth(ctx, 10);
    [text drawAtPoint:CGPointMake(0.0, 0.0) withAttributes:@{NSFontAttributeName : font, NSForegroundColorAttributeName : color}];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}





Comments