iOS开发---阿里巴巴IconFont适配技术

转载 2016年06月01日 11:12:16

在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现。而为了要兼容普通屏与Retina屏的设备,苹果要求 每个背景图都要以两种尺寸存(a.png和a@2x.png),这让设计师们增加了成本,因为他们每次都得出两份背景图标。

 

现在在web开发上, icon font技术的应用很广泛,它不仅在解决多分辨率显示问题上很有成效,而且在使用它的时候还能降低不少设计和开发成本。

 

那么它能不能应用到ios开发上来呢?带着这个疑问,我在github上找到了 FontasticIcons和 ios-fontawesome,但是这两个OC包对icon资源封装都有限,而且扩展也不是很方便。

 

既然能在ios上使用icon font,那么怎么用呢?经过一番摸索,发现使用原理和自定义字体差不多,只有个别操作不太一样,接下来我给大家详细介绍一下。

 

如何使用自定义字体

在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的。这里以 KaushanScript-Regular为例:

 

Step 1: 导入字体文件

将字体文件拖入项目(ios支持的字体格式有:.ttf、.otf,其他格式不确定):

 

 

然后再在项目的资源池中确认字体文件是否加入项目,打开xcode项目的Build Phases中查看:

 

Step 2: 配置.plist文件

在.plist文件中注册新加入的字体,.plist文件往往以“[appname]-Info.plist”的形式存在于“Supporting Files”文件夹内。 在.plist文件中添加新属性“Fonts provided by application”,该属性的值是一个数组,这意味着可以在这里注册多个字体。

 

 

Step 3: 找到字体集名称

注册完,我们需要检测是否注册成功且取得新字体名称,检测方法就是把所有安装了的字体都打印出来,看看新注册的字体是否在里面:

 

 for (NSString* family in [UIFont familyNames]) 
 { 
     NSLog(@"%@", family); 
     for (NSString* name in [UIFont fontNamesForFamilyName: family]) 
     { 
         NSLog(@"  %@", name); 
     } 
 } 

 

 

运行完,查看控制台里打印出的所有字体集中是否有新注册的字体,如果有,说明注册成功,并将字体名(在这里是“Kaushan Script”)记住留到后面用。

 

 

Step 4: 使用新字体

最后,就是使用你最新加入的字体啦:

 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 60, 300, 50)]; 
 label.font = [UIFont fontWithName:@"Kaushan Script" size:35]; 
 label.text = @"icon font"; 
 label.textColor = UIColorFromRGB(0xFF7300); 
 [self.view addSubview:label]; 

 

效果:

 

开始使用icon font

图标字体也是字体,使用方式和上面所说的差不多,只是在套用上有些差别;这里拿 fontello的图标字体库为例。

 

1.选择需要的图标

在fontello的图标字体库选择自己需要的图标,并下载生成的字体文件。

 

2.按照上面的步骤将图标字体注册到项目中

3.找到图标对应的unicode码

使用 FontLab Studio 5工具打开字体文件(比如fontello.ttf),就可以看到图标与unicode码之间的对应关系啦。

 

 

4.使用图标

 

 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 60, 300, 50)]; 
 label.font = [UIFont fontWithName:@"fontello" size:35]; 
 label.text = @"\U0000E802 \U0000E801 \U0000E803 \U0000E804 \U0000E805 \U0000E81A"; 
 label.textColor = UIColorFromRGB(0xFF7300); 
 [self.view addSubview:label]; 

 

 

在Objective-C中,自定义的unicode码需要以“\U0000E802”这样的格式存在。

 

5.使用emoji表情库

这里还可以使用苹果emoji表情库的图标,这里不需要新加字体库,只要找到emoji图标和unicode之间的对应关系就好,但是这些图标都不是矢量图,缩放请自重。

 UILabel *label5 = [[UILabel alloc] initWithFrame:CGRectMake(10, 480, 300, 50)]; 
 label5.text = @"\U0000e42a\U0000e525\U0000e41c"; 
 [self.view addSubview:label5]; 

 

6.效果

 

7.使用自制图标字体

如果上面介绍的图标库还满足不了你的需求,或者需要的图标分布在多个图标库而不能集中到一个字体文件中;那么你可能需要 自己去制作图标字体文件了。

 

总结

这样,在iOS开发上,不仅可以直接去开源图标库找现成的图标用到项目中,而且还可以轻松地改变图标的颜色、大小,相信可以解放不少设计师和工程师的工作量。

 

上代码

demo

 

图标字体库

fontello

etao图标字体库(这里有个问题要注意,etao的图标字体名为“Untitled1”,是不是生成字体的同学疏忽啦?)

IcoMoon

emoji表情库

 

参考资料

Common Mistakes With Adding Custom Fonts to Your iOS App

Icon font 实践

FontasticIcons

ios-fontawesome

Custom Unicode Characters in Objective-C

CSS3 icon font完全指南

iOS开发---阿里巴巴IconFont适配技术

在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现。而为了要兼容普通屏与Retina屏的设备,苹果要求每个背景图都要以两种尺寸存(a.png和a@2...
  • BX_Jobs
  • BX_Jobs
  • 2016年04月12日 18:34
  • 2857

阿里巴巴iconfont的简单使用

今天写作业的时候,遇到了这样一个问题: 很明显,需要用到四个图标。其实上一次整理过一篇关于奥森图标使用方法的博客,今天也第一个想到去奥森图标的官网去找找看。可是奥森图标网站没有检索功能,我就那样一页...
  • pleasecallme_522
  • pleasecallme_522
  • 2016年10月16日 22:11
  • 1509

使用阿里巴巴图标库生成iconfont字体图标

iconfont字体图标就是用字体来代替图标、图片文件的做法,并且通过字体图标可以对图标的大小、颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色。 通过阿里巴巴图标库制作字体图...
  • Doulvme
  • Doulvme
  • 2017年01月09日 17:22
  • 5646

【Android 进阶】Iconfont 图标的使用以及自定义

Iconfont 图标的使用
  • leaf_130
  • leaf_130
  • 2017年05月12日 14:24
  • 908

在iOS开发中使用iconfont图标

在开发iOS项目时,不可避免的会用到图标,而为了适配不同分辨率的设备,我们通常会需要@2x,@3x两套格式的图片,最明显的就是底部tabBar的图标使用。而对于那些有换肤需求的APP来说,还需要多套图...
  • fhsahfihf
  • fhsahfihf
  • 2016年06月30日 18:40
  • 2244

iconFont在iOS上的使用详解

iconFont原理:app有个特点,就是支持三方语言包,通过这个特点,我们可以把icon做成字体,注册到系统,这样我们就能通过使用文字的方式去使用icon。其实说白了,系统的字体也是图像,只是这个图...
  • tongxiaoshu12
  • tongxiaoshu12
  • 2017年05月18日 21:44
  • 686

WPF字体图标——IconFont

一、字体图标概述 ①字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用它,因此Winform、WPF中都是可以用的。 ②可以在很多地方使用图标字体,包括自定义控件、自定义...
  • songyi160
  • songyi160
  • 2017年02月07日 10:31
  • 1888

iOS开发使用iconfont图片字体

iOS开发者在开发的时候总会遇见一种最常见而且最让程序员头疼的问题,那就是导入图片到工程中,但是苹果设备型号不同导致开发项目的时候必须导入不同尺寸的图片,这就增加了成本,增加了开发的繁琐,并且iOS开...
  • baidu_30511379
  • baidu_30511379
  • 2016年09月08日 17:25
  • 1107

iOS屏幕适配的几种方式

在iOS开发中,会经常碰到屏幕适配的问题,下面来说一下自己在项目开发中遇到的几种屏幕适配的方式. 第一种: 利用宽高比,在不同的屏幕中来进行对控件的位置与控件的宽高进行等比例缩放.选定一个型号的屏...
  • anywhereIOS
  • anywhereIOS
  • 2016年07月23日 23:48
  • 8682

Android 开发中 阿里巴巴矢量图标库 IconFont的使用详解

在项目开发中我们会发现一个问题,我们需要UI给我们切很多图标,而且大部分时候为了适配不同的手机屏幕,需要切很多套图,然后我们很繁琐的给图标命名,然之后放入不同的res文件夹,要做很多得无用功,而现在阿...
  • qq_33589836
  • qq_33589836
  • 2017年01月18日 15:18
  • 1226
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS开发---阿里巴巴IconFont适配技术
举报原因:
原因补充:

(最多只允许输入30个字)