iOS开发---阿里巴巴IconFont适配技术

   <p> </p>    <p> </p>    <p>在开发阿里数据iOS版客户端的时候，由于项目进度很紧，项目里的所有图标都是用最平常的背景图片方案来实现。而为了要兼容普通屏与Retina屏的设备，苹果要求 <a href="/misc/goto?guid=4959670330129622562" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">每个背景图都要以两种尺寸存</span></a>(a.png和a@2x.png)，这让设计师们增加了成本，因为他们每次都得出两份背景图标。</p>    <p> </p>    <p>现在在web开发上， <a href="/misc/goto?guid=4959670330218725609" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">icon font技术</span></a>的应用很广泛，它不仅在解决多分辨率显示问题上很有成效，而且在使用它的时候还能降低不少设计和开发成本。</p>    <p> </p>    <p>那么它能不能应用到ios开发上来呢？带着这个疑问，我在github上找到了 <a href="/misc/goto?guid=4958539572396522203" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">FontasticIcons</span></a>和 <a href="/misc/goto?guid=4959549026140157821" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">ios-fontawesome</span></a>，但是这两个OC包对icon资源封装都有限，而且扩展也不是很方便。</p>    <p> </p>    <p>既然能在ios上使用icon font，那么怎么用呢？经过一番摸索，发现使用原理和自定义字体差不多，只有个别操作不太一样，接下来我给大家详细介绍一下。</p>    <p> </p>    <h2><span style="color:rgb(51,153,102)"><strong>如何使用自定义字体</strong></span></h2>    <p>在讲icon font之前，首先先来看看普通自定义字体是如何在ios中使用的，两个原理是一样的。这里以 <a href="/misc/goto?guid=4959670330362142485" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">KaushanScript-Regular</span></a>为例：</p>    <p> </p>    <h3><strong>Step 1: 导入字体文件</strong></h3>    <p>将字体文件拖入项目（ios支持的字体格式有：.ttf、.otf，其他格式不确定）：</p>    <p> </p>    <p><img alt="" src="https://simg.open-open.com/show/02a1290e9b05a6df315b7bc24ca7862d.png" style="margin:10px 0px"></p>    <p> </p>    <p>然后再在项目的资源池中确认字体文件是否加入项目，打开xcode项目的Build Phases中查看：</p>    <p><img alt="" src="https://simg.open-open.com/show/fa2599025526f99415820419aaf937df.jpg" style="margin:10px 0px"></p>    <p> </p>    <h3><strong>Step 2: 配置.plist文件</strong></h3>    <p>在.plist文件中注册新加入的字体，.plist文件往往以“[appname]-Info.plist”的形式存在于“Supporting Files”文件夹内。 在.plist文件中添加新属性“Fonts provided by application”，该属性的值是一个数组，这意味着可以在这里注册多个字体。</p>    <p> </p>    <p><img alt="" src="https://simg.open-open.com/show/1af9beeb00ce77ef4b1fdacf4ce632f2.jpg" style="margin:10px 0px"></p>    <p> </p>    <h3><strong>Step 3: 找到字体集名称</strong></h3>    <p>注册完，我们需要检测是否注册成功且取得新字体名称，检测方法就是把所有安装了的字体都打印出来，看看新注册的字体是否在里面：</p>    <p> </p>    <pre>   for (NSString* family in [UIFont familyNames])    {        NSLog(@"%@", family);        for (NSString* name in [UIFont fontNamesForFamilyName: family])        {            NSLog(@"  %@", name);        }    }   </pre>    <p> </p>    <p> </p>    <p>运行完，查看控制台里打印出的所有字体集中是否有新注册的字体，如果有，说明注册成功，并将字体名（在这里是“Kaushan Script”）记住留到后面用。</p>    <p> </p>    <p><img alt="" src="https://simg.open-open.com/show/227bb462ef2a1e6b1dbac431be758ddb.png" style="margin:10px 0px"></p>    <p> </p>    <h3><strong>Step 4: 使用新字体</strong></h3>    <p>最后，就是使用你最新加入的字体啦：</p>    <pre>   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];   </pre>    <p> </p>    <p>效果：</p>    <p><img alt="" src="https://simg.open-open.com/show/c1669cac3bccd7ae8b7e763f453b5b6e.png" style="margin:10px 0px"></p>    <p> </p>    <h2><span style="color:rgb(51,153,102)"><strong>开始使用icon font</strong></span></h2>    <p>图标字体也是字体，使用方式和上面所说的差不多，只是在套用上有些差别；这里拿 <a href="/misc/goto?guid=4958830721864621033" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">fontello的图标字体库</span></a>为例。</p>    <p> </p>    <h3><strong>1.选择需要的图标</strong></h3>    <p>在fontello的图标字体库选择自己需要的图标，并下载生成的字体文件。</p>    <p> </p>    <h3><strong>2.按照上面的步骤将图标字体注册到项目中</strong></h3>    <h3><strong>3.找到图标对应的unicode码</strong></h3>    <p>使用 <a href="/misc/goto?guid=4959670330467309134" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">FontLab Studio 5</span></a>工具打开字体文件（比如fontello.ttf），就可以看到图标与unicode码之间的对应关系啦。</p>    <p> </p>    <p><img alt="" src="https://simg.open-open.com/show/a3382a135eee6566acf9eb7a07d44753.png" style="margin:10px 0px"></p>    <p> </p>    <h3><strong>4.使用图标</strong></h3>    <p> </p>    <pre>   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];   </pre>    <p> </p>    <p> </p>    <p><a href="/misc/goto?guid=4959670330552375092" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">在Objective-C中，自定义的unicode码需要以“\U0000E802”这样的格式存在。</span></a></p>    <p> </p>    <h3><strong>5.使用emoji表情库</strong></h3>    <p>这里还可以使用苹果emoji表情库的图标，这里不需要新加字体库，只要找到emoji图标和unicode之间的对应关系就好，但是这些图标都不是矢量图，缩放请自重。</p>    <pre>   UILabel *label5 = [[UILabel alloc] initWithFrame:CGRectMake(10, 480, 300, 50)];    label5.text = @"\U0000e42a\U0000e525\U0000e41c";    [self.view addSubview:label5];   </pre>    <p> </p>    <h3><strong>6.效果</strong></h3>    <p><img alt="" src="https://simg.open-open.com/show/fdf5bfb9159160432f2e17885d70734c.jpg" style="margin:10px 0px"></p>    <p> </p>    <h3><strong>7.使用自制图标字体</strong></h3>    <p>如果上面介绍的图标库还满足不了你的需求，或者需要的图标分布在多个图标库而不能集中到一个字体文件中；那么你可能需要 <a href="/misc/goto?guid=4959670330636175541" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">自己去制作图标字体</span></a>文件了。</p>    <p> </p>    <h2><strong>总结</strong></h2>    <p>这样，在iOS开发上，不仅可以直接去开源图标库找现成的图标用到项目中，而且还可以轻松地改变图标的颜色、大小，相信可以解放不少设计师和工程师的工作量。</p>    <p> </p>    <p><strong>上代码</strong></p>    <p><a href="/misc/goto?guid=4959670330718781662" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">demo</span></a></p>    <p> </p>    <p><strong>图标字体库</strong></p>    <p><a href="/misc/goto?guid=4958830721864621033" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">fontello</span></a></p>    <p><a href="/misc/goto?guid=4959670330810469866" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">etao图标字体库</span></a>（这里有个问题要注意，etao的图标字体名为“Untitled1”，是不是生成字体的同学疏忽啦？）</p>    <p><a href="/misc/goto?guid=4959670330898201535" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">IcoMoon</span></a></p>    <p><a href="/misc/goto?guid=4959670330978348757" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">emoji表情库</span></a></p>    <p> </p>    <p><strong>参考资料</strong></p>    <p><a href="/misc/goto?guid=4959670331062518130" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">Common Mistakes With Adding Custom Fonts to Your iOS App</span></a></p>    <p><a href="/misc/goto?guid=4959670330218725609" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">Icon font 实践</span></a></p>    <p><a href="/misc/goto?guid=4958539572396522203" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">FontasticIcons</span></a></p>    <p><a href="/misc/goto?guid=4959549026140157821" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">ios-fontawesome</span></a></p>    <p><a href="/misc/goto?guid=4959670330552375092" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">Custom Unicode Characters in Objective-C</span></a></p>    <p><a href="/misc/goto?guid=4959670330636175541" style="font-size:12px; line-height:normal; text-decoration:none; color:rgb(102,102,102)"><span style="color:rgb(0,0,255)">CSS3 icon font完全指南</span></a></p>    <p>来自： <a href="/misc/goto?guid=4959670331202241452" rel="nofollow">http://blog.csdn.net/bx_jobs/article/details/51136023</a></p>