图片资源优化：iconfont整理分享

摘要：由于公司的项目里使用了iconfont来部署图片，解决了每套图片还需要设置1x@,2x@,3x@等问题，今天索性来个而整理分享，方便自己也与方便他人。 ---赠人玫瑰，手有余香。

---

简介

IconFont技术起源于Web领域的Web Font技术。随着时间的推移，网页设计越来越漂亮。但是电脑预装的字体远远无法满足设计者的要求，于是Web Font技术诞生了。一个英文字库并不大，通过网络下载字体，完成网页的显示。有了Web Font技术，大大提升了设计师的发挥空间。

网页设计中图标需要适配多个分辨率，每个图标需要占用一次网络请求。于是有人想到了用Web Font的方法来解决这两个问题，就是IconFont技术。将矢量的图标做成字体，一次网络请求就够了，可以保真缩放。解决这个问题的另一个方式是图片拼合的Sprite图。

Web领域使用IconFont类似的技术已经多年，当我在15年接触BootStrap的时候Font Awesome技术大行其道。最近IconFont技术在iOS图片资源方面得以应用，最近有点时间自己研究整理了一番，在此记录学习点滴。

优点

• 由于IconFont是矢量图标,所以可以轻松解决图标适配问题
• 一套图标资源可以在不同平台使用(android ,ios,web)
• 减小体积，字体文件比图片要小
• 图标保真缩放，解决2x/3x乃至将来的nx图问题
• 方便更改颜色大小，图片复用

缺点

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

---

获取iconfont

• 现有的字体库
  fontawesome.dashgame.comionicons.com

• 自己制作
  www.iconfont.cn/help/detail…

---

制作步骤

step1:

从 iconfont 平台选择要使用到的图标（如图），并下载（选择下载代码）至本地；复制字体文件到项目 assets 目录； image
image

step2:

打开下载下来的文件，并在目录中打开 demo_unicode.html，找到图标相对应的 HTML 实体字符码 image
image

step3:

打开 res/values/strings.xml，把 demo_unicode.html 各个图标的 字符吗 添加到 string 值；
如：

<string name="all"></string>
<string name="back"></string>
<string name="cart"></string>
<string name="category"></string>
<string name="close"></string>
<string name="comments"></string>
<string name="cry"></string>

step4:

比如使用 图标 cart，打开 activity_main.xml，添加 string 值到

TextView：
<TextView android:id="@+id/like" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="@string/cart" />

对该 TextView 设置颜色、大小就等同于给图标 cart 设置颜色、大小。而且还不用考虑分辨率问题。

step5:

为 TextView 指定字体库：

import android.graphics.Typeface;

protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main);
Typeface iconfont = Typeface.createFromAsset(getAssets(), 
"iconfont/iconfont.ttf"); 
TextView textview = (TextView)findViewById(R.id.like); 
textview.setTypeface(iconfont);}

通过以上 5 步，就可以实现目的了。

---

这就是iconfont的使用，是不是很简单。
当然你也可以将你的TextView或Typeface封装起来，在自己项目中的BaseActivity

---

如果您感觉满意， 请记得点赞，多谢支持！

也可以加我的QQ或微信：741547004 || rivenlee