·设为首页 ·加入收藏 ·简体中文 ·繁体中文 沧州市2015年中考成绩查询
当前位置:伟德体育投注 > 网页配色 >

Iconfont在教育平台及在iOS中应用实例

文章来源:转载    点击数:    更新时间:2016-02-22

Iconfont是阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具,他能提供矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,目前国内数一,本文我们来看看Iconfont在教育平台及在iOS中如何快速使用。

Iconfont 体系化解决方案

性能优化是前端开发不得不面对,必须重视的一个经久话题。教育平台项目除了常规的web性能优化外,图片资源站到了流量的70%+,因此图片的性能优化是个重中之重。除了常规的图片优化外,课程封面和机构上传的图片采用了webp格式,之前已介绍过,不再赘述。这样,对平台图片的优化已经达到极致了吗?


然后再在项目的资源池中确认字体文件是否加入项目,打开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码之间的对应关系啦。


FontLab Studio 5


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 = @"U0000e42aU0000e525U0000e41c";

[self.view addSubview:label5];


6.效果


效果展示


7.使用自制图标字体

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


总结

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


教育新闻
信息公开
设为首页 | 加入收藏 | 简体中文 | 繁体中文 | 网站地图