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 |     |     |
  +-------+    +------+    |     |     |     |
                           +-----------------+
           ...             |     |     |     |
                           |     |     |     |
                           +-----------------+

图中，三个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}";

• 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);
        }
    }

• 微信小程序无法使用外部字体，需要字体通过base64编码后的字符串引入

缺点

• 图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

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

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

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

自动化创建资源配置类

下载示例工程文件，找到translate.sh脚本

image

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

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

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

#创建strings.xml
./translate.sh java

为了避免android项目中默认strings.xml中已经配置资源，和现有的资源文件冲突，建议在项目中另外创建一个资源文件夹存放iconfont生成的strings.xml资源描述

android {
    compileSdkVersion 26
    defaultConfig {
        ......
    }
    buildTypes {
        ......
    }
    sourceSets {
        main {
            res.srcDirs "src/main/res-icon"
        }
    }
}

这样iconfont生成的strings.xml可以存放在该目录下互不冲突

image

image