{"id":13311682,"url":"https://github.com/FantasticLBP/IconFont_Demo","last_synced_at":"2025-03-10T17:30:39.532Z","repository":{"id":97340282,"uuid":"92646026","full_name":"FantasticLBP/IconFont_Demo","owner":"FantasticLBP","description":"在iOS工程中使用iconfont技术节省图片开销","archived":false,"fork":false,"pushed_at":"2017-07-27T13:45:34.000Z","size":36,"stargazers_count":23,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-08T03:23:56.789Z","etag":null,"topics":["icon-font","ios","ios-app","picture-resource-release","resource-manager","xcode"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FantasticLBP.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-28T07:16:51.000Z","updated_at":"2024-05-31T08:03:29.000Z","dependencies_parsed_at":"2023-06-30T00:46:37.249Z","dependency_job_id":null,"html_url":"https://github.com/FantasticLBP/IconFont_Demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FantasticLBP%2FIconFont_Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FantasticLBP%2FIconFont_Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FantasticLBP%2FIconFont_Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FantasticLBP%2FIconFont_Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FantasticLBP","download_url":"https://codeload.github.com/FantasticLBP/IconFont_Demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242892567,"owners_count":20202558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icon-font","ios","ios-app","picture-resource-release","resource-manager","xcode"],"created_at":"2024-07-29T18:02:18.408Z","updated_at":"2025-03-10T17:30:39.526Z","avatar_url":"https://github.com/FantasticLBP.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"### 工程大小优化之图片资源\n\n\u003e _摘要：_点点iOS项目本身功能较多，导致应用体积也比较大。一个Xcode工程下图片资源占用了很大的空间，且如果有些App需要一键换肤功能，呵呵，不知道得做多少图片。每套图片还需要设置1x@,2x@,3x@等\n\n## 简介\n\nIconFont技术起源于Web领域的Web Font技术。随着时间的推移，网页设计越来越漂亮。但是电脑预装的字体远远无法满足设计者的要求，于是Web Font技术诞生了。一个英文字库并不大，通过网络下载字体，完成网页的显示。有了Web Font技术，大大提升了设计师的发挥空间。\n\n网页设计中图标需要适配多个分辨率，每个图标需要占用一次网络请求。于是有人想到了用Web Font的方法来解决这两个问题，就是IconFont技术。将矢量的图标做成字体，一次网络请求就够了，可以保真缩放。解决这个问题的另一个方式是图片拼合的Sprite图。\n\nWeb领域使用IconFont类似的技术已经多年，当我在15年接触BootStrap的时候Font Awesome技术大行其道。最近IconFont技术在iOS图片资源方面得以应用，最近有点时间自己研究整理了一番，在此记录学习点滴。\n\n## 优点\n\n* 减小体积，字体文件比图片要小\n* 图标保真缩放，解决2x/3x乃至将来的nx图问题\n* 方便更改颜色大小，图片复用\n\n## 缺点\n\n* 只适用于\n  `纯色icon`\n* 使用unicode字符难以理解\n* 需要维护字体库\n\n网上说了一大堆如何制作IconFont的方法，在此不做讨论。\n\n## 我们说说怎么用\n\n1. 首先选取一些有丰富资源的网站，我使用阿里的IconFont多年，其他的没去研究，所以此处直接使用阿里的产品。地址：[http://www.iconfont.cn/plus](http://www.iconfont.cn/plus)\n2. 打开网站在线挑选好合适的图标加入购物车，如图![阿里IconFont](https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/屏幕快照%202017-05-28%20下午2.43.33.png \"阿里IconFont\")\n3. 选择好之后在购物车查看，然后点击下载代码![下载IconFont](https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/屏幕快照%202017-05-28%20下午2.43.48.png \"下载IconFont\")\n4. 打开下载好的文件，其机构如下，我们在iOS项目开发过程中使用unicode的形式使用IconFont,所以打开demo\\_unicode.html\n![下载文件目录结构](https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/屏幕快照%202017-05-28%20下午2.44.09.png \"下载文件目录结构\")\n![unicode形式使用IconFont](https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/屏幕快照%202017-05-28%20下午2.44.22.png \"unicode形式使用IconFont\")\n5. 注意：创建 UIFont 使用的是字体名，而不是文件名；文本值为 8 位的 Unicode 字符，我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码，比如： \"店\" 对应的 HTML 实体 Unicode 码为：0x3439 转换后为：\\U00003439 就是将 0x 替换为 \\U 中间用 0 填补满长度为 8 个字符\n\n# Xcode中使用IconFont\n\n初步尝试使用\n\n1. 首先看看如何简单实用IconFont\n2. 首先将下载好的文件夹中的**iconfont.ttf**加入到Xcode工程中，确保加入成功在Build检查![Xcode检查引入结果](https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/屏幕快照%202017-05-28%20下午2.51.36.png \"Xcode检查引入结果\")\n3. 怎么用？\n\n```\nNSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:@\"\\U0000e696  \\U0000e6ab  \\U0000e6ac  \\U0000e6ae\"];\n    [attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, 1)];\n    [attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(3, 1)];\n    [attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(9, 1)];\n    self.label.attributedText = attributedStr;\n\n[self.view addSubview:self.label];\n\npragma mark - getter and setter\n-(UILabel *)label{\n       if (!_label) {\n           _label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, BoundWidth-200, 40)];\n           _label.font = [UIFont fontWithName:@\"iconfont\" size:24];\n           _label.textColor = [UIColor purpleColor];\n       }\n       return _label;\n   }\n```\n\n#### 做进一步封装，实用更加方便\n\n\u003cp\u003e利用IconFont生成1个UIImage只需要LBPIconFontmake(par1, par2, par3)，par1:iconfont的unicode值；par2:图片大小；par3:图片的颜色值。\u003c/p\u003e\n\n\u003cp\u003e其中，LBPIconFontmake是一个宏，#define LBPIconFontmake(text,size,color) [[LBPFontInfo alloc] initWithText:text withSize:size andColor:color]。\u003c/p\u003e\n\n```\nself.latestImageView.image = [UIImage iconWithInfo:LBPIconFontmake(@\"\\U0000e6ac\", 60, @\"000066\") ];\n```\n\n\n\n![封装后的工程目录结构](https://github.com/FantasticLBP/iOSKonwledge-Kit/raw/master/assets/屏幕快照%202017-05-28%20下午2.56.00.png \"封装后的工程目录结构\")\n\n1. LBPFontInfo来封装字体信息\n2. UIColor+picker根据十六进制字符串来设置颜色\n3. LBPIconFont向系统中注册IconFont字体库，并使用\n4. UIImage+LBPIconFont封装一个使用IconFont的Image分类\n\n# 效果图\n![效果图](https://raw.githubusercontent.com/FantasticLBP/iOSKonwledge-Kit/master/assets/Simulator%20Screen%20Shot%202017年5月28日%20下午3.19.44.png \"效果图\")\n\n\n\n如果有不懂的地方可以加入QQ交流群讨论：\u003ca target=\"_blank\" href=\"//shang.qq.com/wpa/qunwpa?idkey=c9dc4ab0b2062e0004b3b2ed556da1ce898631742e15780297feb3465ad08eda\"\u003e**515066271**\u003c/a\u003e。这个QQ群讨论技术范围包括：iOS、H5混合开发、前端开发、PHP开发，欢迎大家讨论技术。\n\n\n# Demo地址\n\n[https://github.com/FantasticLBP/IconFont\\_Demo](https://github.com/FantasticLBP/IconFont_Demo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFantasticLBP%2FIconFont_Demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFantasticLBP%2FIconFont_Demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFantasticLBP%2FIconFont_Demo/lists"}