提問

• 提需求的人圖標(biāo)樣式(顏色)要換？
• 圖標(biāo)如何滿足不同的分辨率以及清晰度？
• 圖標(biāo)太多導(dǎo)致項(xiàng)目體積越來越大，如何瘦身？
• 按鈕狀態(tài)切換只用一個(gè)圖標(biāo)，例如點(diǎn)擊和松開，甚至更多的狀態(tài)？

用字體來代替圖標(biāo) 阿里iconfont

• 輕量性：一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會(huì)馬上渲染出來，不需要下載一個(gè)圖像。可以減少HTTP請(qǐng)求，還可以配合HTML5離線存儲(chǔ)做性能優(yōu)化。

• 靈活性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個(gè)不同大小和不同效果的圖像輸出一個(gè)不同文件。

• 跨平臺(tái)：支持android，iOS，web，微信小程序。

• 兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。

iconfont 制作的基本原理

Unicode?碼表是一個(gè)很大的表格，每個(gè)表格都對(duì)應(yīng)一個(gè) Unicode 字符，每個(gè)字符都有一個(gè) Unicode 碼值對(duì)應(yīng)，如 “李” 對(duì)應(yīng) “\u674e”, “靖” 對(duì)應(yīng) “\u9756”。因?yàn)榇a表很大，有部分表格并沒有對(duì)應(yīng)的字符，但是它有自己的碼值。iconfont 的制作，首先將繪制的圖形（可以是一張圖片、也可以是一個(gè) svg 描述）通過工具或者程序生成文字icon，然后將文字icon對(duì)應(yīng)到碼表之中，為了不干預(yù)碼表中已有的字符，我們通常會(huì)把文字icon對(duì)應(yīng)到?jīng)]有字符的表格中，最后導(dǎo)出我們額外對(duì)應(yīng)的表格信息，生成iconfont。如下圖所示：

                              Unicode 碼表
                           +-----------------+
           ...             |     |     |     |
                           |     |     |     |
   圖形icon     文字icon    +-----------------+
  +-------+    +------+    |     |     |     |
  |icon a +---->   A  +-----------> Ua |     |
  +-------+    +------+    |     |     |     |
                           +-----------------+
  +-------+    +------+    |     |     |     |
  |icon b +---->   B  +-----> Ub +     |     +------> iconfont
  +-------+    +------+    |     |     |     |
                           +-----------------+
  +-------+    +------+    |     |     |     |
  |icon C +---->   C  +-----> Uc |     |     |
  +-------+    +------+    |     |     |     |
                           +-----------------+
           ...             |     |     |     |
                           |     |     |     |
                           +-----------------+

圖中，三個(gè)icon分別對(duì)應(yīng)到 Unicode 碼表中碼值為 Ua Ub Uc 的三個(gè)表格，那么最后導(dǎo)出的 iconfont 也就只包含這三個(gè)字符信息，這個(gè)體積是很小的。

SVG

一種xml格式的字體數(shù)據(jù)，每個(gè)字的圖形對(duì)應(yīng)了一個(gè)路徑。這個(gè)路徑就是我們svg里面的path對(duì)應(yīng)的序列。

[圖片上傳失敗...(image-7204df-1579312307888)]

好了于是我們有了一個(gè)全新的思路，由設(shè)計(jì)師上傳svg，我們存儲(chǔ)下來，然后大家自由組合，由平臺(tái)拼出對(duì)應(yīng)的svg字體，然后再轉(zhuǎn)換到不同的其他格式的字體。

[圖片上傳失敗...(image-9d0b45-1579312307888)]

使用注意要點(diǎn)

• 字體使用unicode碼去引用，容易散落各地，應(yīng)該統(tǒng)一寫在配置文件中通過變量訪問
• iOS oc和swift表示方式不同

/** oc **/
#define ICON_ZHI_SHU @"\U0000e619"
/** swift **/
static let ICON_JING_XUAN:String = "\u{0000e601}";

• android需要通過代碼修改Typeface來使用iconfont字體，可自己創(chuàng)建個(gè)TextView類初始化的時(shí)候添加好字體，方便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編碼后的字符串引入

缺點(diǎn)

• 圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色，由于此限制使得它不能廣泛使用。

• 使用版權(quán)上有限制，有好多字體是收費(fèi)的。當(dāng)然也有很多免費(fèi)開源的精美字體圖標(biāo)供下載使用。

• 創(chuàng)作自已的字體圖標(biāo)很費(fèi)時(shí)間，重構(gòu)人員后期維護(hù)的成本偏高

• 開發(fā)app的情況下僅限于本地icon顯示，遠(yuǎn)程圖標(biāo)仍然只能使用圖片的形式。

自動(dòng)化創(chuàng)建資源配置類

下載示例工程文件，找到translate.sh腳本

image

執(zhí)行腳本，生成的.h或者.swift直接在iOS工程項(xiàng)目中導(dǎo)入使用，生成的strings.xml導(dǎo)入到android項(xiàng)目中

#創(chuàng)建IconFontConfig.h
./translate.sh objc

#創(chuàng)建IconFontConfig.swift
./translate.sh swift

#創(chuàng)建strings.xml
./translate.sh java

為了避免android項(xiàng)目中默認(rèn)strings.xml中已經(jīng)配置資源，和現(xiàn)有的資源文件沖突，建議在項(xiàng)目中另外創(chuàng)建一個(gè)資源文件夾存放iconfont生成的strings.xml資源描述

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

這樣iconfont生成的strings.xml可以存放在該目錄下互不沖突

image

image