自定义字体出难点呀,Logo字体

本篇文章讲的是在实际项目中碰到一款自定义字体在展示上出现问题,然后运用先进的苹果爸爸的工具来解决这个问题的故事。

 iconfont 技术的主要是将图标转化为字体来减少应用体积。如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库。

如何使用自定义字体

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

 

Step 1: 导入字体文件

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

 

图片 1

 

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

图片 2

 

Step 2: 配置.plist文件

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

 

图片 3

 

Step 3: 找到字体集名称

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

 

  1. for (NSString* family in [UIFont familyNames]) 
  2.     NSLog(@"%@", family); 
  3.     for (NSString* name in [UIFont fontNamesForFamilyName: family]) 
  4.     { 
  5.         NSLog(@"  %@", name); 
  6.     } 

 

 

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

 

图片 4

 

Step 4: 使用新字体

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

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

 

效果:

图片 5

 

开始使用icon font

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

 

1.选择需要的图标

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

 

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

3.找到图标对应的unicode码

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

 

图片 6

 

4.使用图标

 

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

 

 

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

 

5.使用emoji表情库

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

  1. UILabel *label5 = [[UILabel alloc] initWithFrame:CGRectMake(10, 480, 300, 50)]; 
  2. label5.text = @"U0000e42aU0000e525U0000e41c"; 
  3. [self.view addSubview:label5]; 

 

6.效果

图片 7

 

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

 

 

 

 

原文链接:

https://github.com/JohnWong/IconFont 

如何使用自定义字体

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

 

Step 1: 导入字体文件

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

 

图片 8

 

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

图片 9

 

Step 2: 配置.plist文件

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

 

图片 10

 

Step 3: 找到字体集名称

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

 

  1. for (NSString* family in [UIFont familyNames]) 
  2.     NSLog(@"%@", family); 
  3.     for (NSString* name in [UIFont fontNamesForFamilyName: family]) 
  4.     { 
  5.         NSLog(@"  %@", name); 
  6.     } 

 

 

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

 

图片 11

 

Step 4: 使用新字体

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

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

 

效果:

图片 12

 

开始使用icon font

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

 

1.选择需要的图标

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

 

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

3.找到图标对应的unicode码

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

 

图片 13

 

4.使用图标

 

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

 

 

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

 

5.使用emoji表情库

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

  1. UILabel *label5 = [[UILabel alloc] initWithFrame:CGRectMake(10, 480, 300, 50)]; 
  2. label5.text = @"U0000e42aU0000e525U0000e41c"; 
  3. [self.view addSubview:label5]; 

 

6.效果

图片 14

 

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

 

 

 

 

原文链接:

https://github.com/JohnWong/IconFont 

1. 自定义字体出什么问题了?

设计师们的作品总是千变万化,为了成就他们,作为程序员的我们只好满足他们喽。

所以当设计师用到一款神奇的字体的时候,我是不会拒绝的,就像下面这个样子:

图片 15神奇的字体

为了让大家能更好的看到这个问题,我把 label 设置了一个背景色,label 的 width 和 height 都等于50。现在,在 storyboard 中看起来是没问题的,让我们 Run 一下:

图片 16实际运行的效果

对比 system font 字体的 label,明显感觉这个 DINCondensedC 字体的内容是偏上的!(当然不用对比也能发现)。WTF!

 

2. 解决思路

优点:

2.1 既然是内容偏上,那么是否和 content Mode 有关?

可惜的是,经过尝试,改变 contentMode 并不能对 UILabel 产生任何影响(实际绘制内容中包含下方的空白)。

结论:不可行

  • 减小体积,字体文件比图片要小
  • 图标保真缩放,解决2x/3x乃至将来的nx图问题
  • 方便更改颜色大小,图片复用
2.2 继承 UILabel 并重写 drawRect ?利用 CoreText 绘制字体?

这两种方案应该是可行的,但是,为了这个小字体,用得着这么复杂的-【通过字体大小与 label 高度计算偏移量】-【用到这个字体的 label 统一换成 XXLabel 】流程吗?

万一哪天设计师说:来,咱们来个富文本,中间这几个字用 DINCondensedC 字体,两边的字用 system 字体,那你不是要哭了?

结论:不可行

 

2.3 程序解决不了,那就用人解决吧

让我们找到可爱的设计师,请他喝个下午茶,搓顿不错的晚饭,带他做个大保健,然后和他说:兄弟这个UI图可以换个字体吗... 算了成本有点高。

结论:不可行

缺点:

2.4 可否从字体入手,自己修改字体?

既然字体有点不太正常,那么我们只能使出大招:自己动手修改这个字体。据说有一款 App:Glyphs 对于制作/修改字体来说,很强大!然后让我们好好下载,静静等待吧。下载完毕打开这个【PT DIN Condensed Cyrillic.ttf】字体文件,没想到这个软件还收费,只能试用几天。试用就使用吧,但是,这个字体里的每个字符我都要一个一个去改?作为程序员,不能忍!

结论:不可行

  • 只适用于纯色icon
  • 使用unicode字符难以理解
  • 需要维护字体库

3. 最终的解决方案

最后还是得靠苹果爸爸,大家的好爸爸。苹果提供了一款字体修改工具:Apple Font Tool Suite。下面就让我们用该工具来解决这个棘手的问题。

 

3.1 下载该工具

进入这里,滚到最下方,可以看到【Apple Font Tool Suite】,点击下方的下载,下载一个适合自己 Xcode 版本,下载完成后无脑安装。

 

3.2 获取字体的信息文件

打开终端,输入:ftxdumperfuser -t hhea -A d PT DIN Condensed Cyrillic.ttf,前面的【ftxdumperfuser -t hhea -A d 】为指令,后面的为你的字体文件路径。最后回车,你会看到同级文件夹下回多出一个【DINCondensedC.hhea.xml】文件:

图片 17字体信息文件

字体管理

3.3 修改字体文件中的信息

让我们打开这个字体文件,你会看到:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE hheaTable [<!ELEMENT hheaTable EMPTY><!ATTLIST hheaTable versionMajor CDATA #IMPLIED versionMinor CDATA #IMPLIED ascender CDATA #IMPLIED descender CDATA #IMPLIED lineGap CDATA #IMPLIED advanceWidthMax CDATA #IMPLIED minLeftSideBearing CDATA #IMPLIED minRightSideBearing CDATA #IMPLIED xMaxExtent CDATA #IMPLIED caretSlopeRise CDATA #IMPLIED caretSlopeRun CDATA #IMPLIED caretOffset CDATA #IMPLIED metricDataFormat CDATA #IMPLIED numberOfHMetrics CDATA #IMPLIED>]><!-- Data generated Sun Aug 13 18:51:10 2017 Generated by ftxdumperfuser build 347, FontToolbox.framework build 257 Font full name: 'PT DIN Condensed Cyrillic' Font PostScript name: 'DINCondensedC'--><hheaTable versionMajor="1" versionMinor="0" ascender="700" descender="-209" lineGap="68" advanceWidthMax="889" minLeftSideBearing="-270" minRightSideBearing="-22" xMaxExtent="844" caretSlopeRise="1" caretSlopeRun="0" caretOffset="0" metricDataFormat="0" numberOfHMetrics="234" />

没错这是个 XML 文件,它里面包含了字体的一些公共信息:

  • ascender:从字体的 baseLine 到最高处的距离
  • descender:从字体的 baseline 到最低点的距离
  • lineGap:印刷线的间距
  • ...

这里面的每一项信息,都可以从苹果的:hheaTable文档 这篇文档中找到。文档中可以看到,一款字体也是一个大工程。

今天我们要解决的,是【DINCondensedC】字体偏上的问题,因此,让我们来调节调节 ascender 这个属性,将它从700改为900,然后保存文件。

     字体管理方式分为两种:在线管理(iconfont.cn)和FontForge工具。

3.4 将修改完的文件注入原 ttf 文件

打开终端,输入:ftxdumperfuser -t hhea -A f PT DIN Condensed Cyrillic.ttf,注意这里 -A 后面的 d 已经换成了 f ,回车。

  

3.5 替换原工程中的字体文件

切回我们的工程,替换原字体文件,Run 一下:

图片 18修改后的字体

问题已解决!

 

4. Demo地址

点击这里直达仓库

  • CustomFontIssues 为字体有问题的工程
  • CustomFontIssuesResolve 为已解决字体问题的工程

欢迎品尝~

字体库生成

     这里推荐两个比较好用的网站iconmoon和iconfon,个人在做网页的时候,经常会在iconmoon上制作字体图标。如果设计师给你了字体库最好,如果给你的是 .svg 文件,就需要自己去转为字体库了。这里以iconmoon为例制作字体库,iconmoon需要FQ。

 

1、导入设计师给的 .svg 文件

 

图片 19

 

 

2、点击Generate Font 生成字体库,如下图

 

图片 20

 

 

3、打开下载的文件夹,如下图

 

图片 21

 

 

 

4、将.ttf 的字体库,导入项目中,要确保在下图路径中可以看到字体库

 

图片 22

 

 

5、在plist文件中,添加字段Fonts provided by application并在该字段下添加GWH_search.ttf。工程中便可使用字体库了。

 

图片 23

 

 

6、打开demo.html,可以看到图标字体的Unicode编码

 

图片 24

 

     使用的时候只需要将图标对应的Unicode编码转化为text字符串即可,转化方式’U0000

  • 对应编码’

 

示例:

  • [_textLabelfontWithIcon:@"U0000e900"size:14color:[UIColorredColor]];

    UIImageView *imgV = [[UIImageViewalloc] initWithFrame:CGRectMake(100, 100, 30, 30)];
    [imgV setImage:kImageFont(@"U0000e900", 17, [UIColorgreenColor])];
    [self.viewaddSubview:imgV];

UIButton *iconBtn = [[UIButtonalloc]
initWithFrame:CGRectMake(100, 150, 30, 30)];  
[iconBtn
setTitleWithIcon:@"\U0000e900"size:14color:[UIColormagentaColor]];  
[self.viewaddSubview:iconBtn];

 

效果:

图片 25

 

分类:

UIImage IconFont.m

  • (UIImage *)imageWithIcon:(NSString *)iconCode size:(NSUInteger)size color:(UIColor *)color {
        CGSize imageSize = CGSizeMake(size, size);
        // opaque:NO 不透明
        UIGraphicsBeginImageContextWithOptions(imageSize, NO, [[UIScreenmainScreen] scale]);
        UILabel *label = [[UILabelalloc] initWithFrame:CGRectMake(0, 0, size, size)];
        label.font = [UIFontfontWithName:@"GWH_search"size:size];
        label.text = iconCode;
        if(color){
            label.textColor = color;
        }
        [label setNumberOfLines:0];
        label.textAlignment = NSTextAlignmentCenter;
        // 渲染自身
        [label.layerrenderInContext:UIGraphicsGetCurrentContext()];
        UIImage *retImage = [UIGraphicsGetImageFromCurrentImageContext() imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        UIGraphicsEndImageContext();
        return retImage;
    }

 

 

UIButton IconFont.m

  • - (void)setTitleWithIcon:(NSString *)iconCode size:(NSInteger)size color:(UIColor *)color {
        [selfsetTitle:iconCode forState:UIControlStateNormal];
        self.titleLabel.font = [UIFontfontWithName:@"GWH_search"size:size];
        if (color) {
            [selfsetTitleColor:color forState:UIControlStateNormal];
        }
    }

 

 

UILabel IconFont.m

  • - (void)fontWithIcon:(NSString *)iconCode size:(NSInteger)size color:(UIColor *)color {
        self.font = [UIFontfontWithName:@"GWH_search"size:size];
        self.text = iconCode;
        if (color) {
            self.textColor = color;
        }
    }

 

 

 

 

 

 

 

 

参考链接:

     

     

本文由星彩网app下载发布于计算机编程,转载请注明出处:自定义字体出难点呀,Logo字体

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。