Using icon font in iOS

2013/04/21 在 iOScon 上分享的keynote。

Transcript

1. 在iOS应⽤用中使⽤用
   icon font
   钟⼦子豪 @PrideChung
   pride.chung@gmail.com
   13年4月21⽇日星期⽇日
   

   View Slide

2. icon font是制作成字体⽂文件的图标。以字体的⽅方式来
   显⽰示图标，在 Web 开发中相当流⾏行。
   13年4月21⽇日星期⽇日
   

   View Slide

3. e.g
   13年4月21⽇日星期⽇日
   

   View Slide

4. 13年4月21⽇日星期⽇日
   

   View Slide

5. icon font好处都有啥？
   13年4月21⽇日星期⽇日
   

   View Slide

6. ⽮矢量字体⽂文件，放⼤大不失真
   ⼀一次搞定不同分辨率
   100%
   500%
   @2x
   13年4月21⽇日星期⽇日
   

   View Slide

7. 通过代码⽅方便地控制图标属性
   13年4月21⽇日星期⽇日
   

   View Slide

8. ⽂文件体积
   13年4月21⽇日星期⽇日
   

   View Slide

9. 在 Web 开发中使⽤用 icon font
   指定字体 指定图标编码
   13年4月21⽇日星期⽇日
   

   View Slide

10. 在 iOS 中使⽤用 icon font
    添加字体
    13年4月21⽇日星期⽇日
    

    View Slide

11. ! static dispatch_once_t onceToken;
    ! dispatch_once(&onceToken, ^{
    ! ! NSURL * url = [[NSBundle mainBundle] URLForResource:@"FontAwesome" withExtension:@"otf"];
    ! ! CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url);
    ! ! CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider);
    ! ! CGDataProviderRelease(fontDataProvider);
    ! ! CFErrorRef error;
    ! ! CTFontManagerRegisterGraphicsFont(newFont, &error);
    ! ! CGFontRelease(newFont);
    ! });
    !
    ! UIFont *font = [UIFont fontWithName:@"FontAwesome" size:size];
    运⾏行时注册
    在项⺫⽬目的Info.plist中注册
    或者
    13年4月21⽇日星期⽇日
    

    View Slide

12. ! UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 45, 45)];
    ! label.font = [UIFont fontWithName:@"FontAwesome" size:45];
    ! label.text = @"\uf09b";
    13年4月21⽇日星期⽇日
    

    View Slide

13. Live Demo
    代码已上传到
    https://github.com/PrideChung/Demos/tree/
    master/IconFontDemo
    13年4月21⽇日星期⽇日
    

    View Slide

14. 帮助使⽤用 icon font 的库
    13年4月21⽇日星期⽇日
    

    View Slide

15. Font Awesome
    http://fortawesome.github.io/Font-Awesome/
    13年4月21⽇日星期⽇日
    

    View Slide

16. iconic
    http://somerandomdude.com/work/iconic/
    13年4月21⽇日星期⽇日
    

    View Slide

17. icon font⼤大搜罗
    http://www.qianduan.net/icon-font-large-collecting.html
    13年4月21⽇日星期⽇日
    

    View Slide

18. 制作 icon font
    给你的设计师看这个：
    http://ux.etao.com/posts/221
    13年4月21⽇日星期⽇日
    

    View Slide

19. I’m looking for jobs
    (Not the Steve one)
    13年4月21⽇日星期⽇日
    

    View Slide

20. Thank You
    13年4月21⽇日星期⽇日
    

    View Slide