[Wondgirl]iOS-Icon font的制做及使用

转载请注明出处：http://blog.csdn.net/wondgirl/article/details/53196384

icon font:iconfont就是把一些矢量的图标导出svg后，生成一个字体文件。

icon font优点:

 1.占用体积小.

 2.图标缩放不失真.

 3.它就是个字体,可以任意更改颜色,阴影等.

 4.多平台使用(iOS,android,web)

我的在iOS中使用iconfont的demo下载:

http://download.csdn.net/download/wondgirl/9685728

卓同学推荐的一个OC的例子.https://github.com/JohnWong/IconFont

一.icon font的制作:

1.打开http://www.iconfont.cn网址.注册并登陆.我选择的是用github账号登陆的.

2.下载http://www.sketchcn.com工具.

   (破解版下载地址:http://www.pc6.com/mac/111315.html)

3.打开sketch

   a.点击左上角的+,弹出下图

   

   b.用鼠标拖拽出这个五角星

  c.选择Layer---convert to outlines

   

  d.导出为.svg文件(注意右下角选择SVG),然后点右下角的Export Star.

二.上传

 1.打开登陆好的http://www.iconfont.cn,在右上角点上传.

  直接把刚才导出来的star.svg上传上去.

 2.当上传了多个图片后,我们可以把上传的多个icon添加到一个库文件中.

   进入  我的图标  ,把鼠标移到要添加到库中的icon上面,点击上面的购物车按钮.

3.点击右下角的购物车-----添加项目.

点加入项目后面的文件夹图标,即可新件项目.

在  我的项目中,选择  下载至本地.

三.在ios中的使用

 1.把刚才下载的后缀名为.ttf的文件添加到工程中.

2.打开Info.plist文件，增加一个新的Array类型的键，键名设置为UIAppFonts（Fonts provided by application），增加字体的文件名：“iconfont.ttf“

3.Unicode码的复制.

打开刚才下载的demo_unicode.html文件.
   

   如果是代码方式使用,只复制图片下面的x后面分号前面的四部分.

   这里我们复制的是e602,在代码中前面加上\U,中间用0补满8位,      为:\U0000e602.

        如果是故事板的方式,直接复制图形,然后选择自己的这个字库就可以.

       

4.代码方式使用

// 打开Info.plist文件，增加一个新的Array类型的键，键名设置为UIAppFonts（Fonts provided by application），增加字体的文件名：“iconfont.ttf“
    UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
    
    //引号中写你导入进来的.ttf的名字. 和plist里添加的名字要一至.
    UIFont *iconfont = [UIFont fontWithName:@"iconfont" size: 100];
    label.font = iconfont;
    label.text = @"\U0000e602  \U0000e603 ";//复制的Unicode码
    [self.view addSubview: label];

注:文本值为 8 位的 Unicode 字符，我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码，比如： "店" 对应的 HTML 实体 Unicode 码为：0x3439 转换后为：\U00003439 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符