iconfont技术分享

提需求的人图标样式(颜色)要换？
图标如何满足不同的分辨率以及清晰度？
图标太多导致项目体积越来越大，如何瘦身？
按钮状态切换只用一个图标，例如点击和松开，甚至更多的状态？
用字体来代替图标 阿里iconfont
轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

跨平台：支持android，iOS，web，微信小程序。

兼容性：网页字体支持所有现代浏览器，包括IE低版本。

iconfont 制作的基本原理
Unicode 码表是一个很大的表格，每个表格都对应一个 Unicode 字符，每个字符都有一个 Unicode 码值对应，如 “李” 对应 “\u674e”, “靖” 对应 “\u9756”。因为码表很大，有部分表格并没有对应的字符，但是它有自己的码值。iconfont 的制作，首先将绘制的图形（可以是一张图片、也可以是一个 svg 描述）通过工具或者程序生成文字icon，然后将文字icon对应到码表之中，为了不干预码表中已有的字符，我们通常会把文字icon对应到没有字符的表格中，最后导出我们额外对应的表格信息，生成iconfont。如下图所示：

                          Unicode 码表
                       +-----------------+
       ...             |     |     |     |
                       |     |     |     |

图形icon 文字icon ±----------------+
±------+ ±-----+ | | | |
|icon a ±—> A ±----------> Ua | |
±------+ ±-----+ | | | |
±----------------+
±------+ ±-----+ | | | |
|icon b ±—> B ±----> Ub + | ±-----> iconfont
±------+ ±-----+ | | | |
±----------------+
±------+ ±-----+ | | | |
|icon C ±—> C ±----> Uc | | |
±------+ ±-----+ | | | |
±----------------+
… | | | |
| | | |
±----------------+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
图中，三个icon分别对应到 Unicode 码表中码值为 Ua Ub Uc 的三个表格，那么最后导出的 iconfont 也就只包含这三个字符信息，这个体积是很小的。

SVG
一种xml格式的字体数据，每个字的图形对应了一个路径。这个路径就是我们svg里面的path对应的序列。

[图片上传失败…(image-7204df-1579312307888)]

好了于是我们有了一个全新的思路，由设计师上传svg，我们存储下来，然后大家自由组合，由平台拼出对应的svg字体，然后再转换到不同的其他格式的字体。

[图片上传失败…(image-9d0b45-1579312307888)]

使用注意要点
字体使用unicode码去引用，容易散落各地，应该统一写在配置文件中通过变量访问
iOS oc和swift表示方式不同
/** oc /
#define ICON_ZHI_SHU @"\U0000e619"
/ swift **/
static let ICON_JING_XUAN:String = “\u{0000e601}”;
1
2
3
4
android需要通过代码修改Typeface来使用iconfont字体，可自己创建个TextView类初始化的时候添加好字体，方便layout.xml中使用

public IconTextView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    changeTypeFace(context,attrs);
}

private void changeTypeFace(Context context, AttributeSet attrs)
{
    if (attrs != null)
    {
        Typeface mtf = Typeface.createFromAsset(context.getAssets(),
                iconPath);
        super.setTypeface(mtf);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
微信小程序无法使用外部字体，需要字体通过base64编码后的字符串引入
缺点
图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

创作自已的字体图标很费时间，重构人员后期维护的成本偏高

开发app的情况下仅限于本地icon显示，远程图标仍然只能使用图片的形式。

自动化创建资源配置类
下载示例工程文件，找到translate.sh脚本

执行脚本，生成的.h或者.swift直接在iOS工程项目中导入使用，生成的strings.xml导入到android项目中

#创建IconFontConfig.h
./translate.sh objc

#创建IconFontConfig.swift
./translate.sh swift

#创建strings.xml
./translate.sh java
1
2
3
4
5
6
7
8
为了避免android项目中默认strings.xml中已经配置资源，和现有的资源文件冲突，建议在项目中另外创建一个资源文件夹存放iconfont生成的strings.xml资源描述

android {
compileSdkVersion 26
defaultConfig {
…
}
buildTypes {
…
}
sourceSets {
main {
res.srcDirs “src/main/res-icon”
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
这样iconfont生成的strings.xml可以存放在该目录下互不冲突

————————————————
版权声明：本文为CSDN博主「skyMaster2018」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_29622139/article/details/104091480