Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using icon font in iOS

Using icon font in iOS

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

Pride Chung

April 21, 2013
Tweet

Other Decks in Programming

Transcript

  1. 在iOS应⽤用中使⽤用
    icon font
    钟⼦子豪 @PrideChung
    [email protected]
    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