iconfont技術(shù)分享

提問

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

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

輕量性：一個圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小迅涮。一旦圖標(biāo)字體加載了废赞，圖標(biāo)就會馬上渲染出來，不需要下載一個圖像叮姑“Φ兀可以減少HTTP請求，還可以配合HTML5離線存儲做性能優(yōu)化传透。
靈活性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小耘沼，還可以加各種文字效果，包括顏色朱盐、Hover狀態(tài)群嗤、透明度、陰影和翻轉(zhuǎn)等效果兵琳】衩兀可以在任何背景下顯示。使用位圖的話躯肌，必須得為每個不同大小和不同效果的圖像輸出一個不同文件者春。
跨平臺：支持android，iOS清女，web碧查，微信小程序。
兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本忠售。

iconfont 制作的基本原理

Unicode?碼表是一個很大的表格传惠，每個表格都對應(yīng)一個 Unicode 字符，每個字符都有一個 Unicode 碼值對應(yīng)稻扬，如 “李” 對應(yīng) “\u674e”, “靖” 對應(yīng) “\u9756”卦方。因為碼表很大，有部分表格并沒有對應(yīng)的字符泰佳，但是它有自己的碼值盼砍。iconfont 的制作，首先將繪制的圖形（可以是一張圖片逝她、也可以是一個 svg 描述）通過工具或者程序生成文字icon浇坐，然后將文字icon對應(yīng)到碼表之中，為了不干預(yù)碼表中已有的字符黔宛，我們通常會把文字icon對應(yīng)到?jīng)]有字符的表格中近刘，最后導(dǎo)出我們額外對應(yīng)的表格信息，生成iconfont臀晃。如下圖所示：

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

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

SVG

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

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

好了于是我們有了一個全新的思路，由設(shè)計師上傳svg宦棺，我們存儲下來瓣距，然后大家自由組合，由平臺拼出對應(yīng)的svg字體渺氧，然后再轉(zhuǎn)換到不同的其他格式的字體旨涝。

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

使用注意要點

字體使用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)建個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編碼后的字符串引入

缺點

圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色弧腥，由于此限制使得它不能廣泛使用。
使用版權(quán)上有限制潮太，有好多字體是收費的管搪。當(dāng)然也有很多免費開源的精美字體圖標(biāo)供下載使用虾攻。
創(chuàng)作自已的字體圖標(biāo)很費時間，重構(gòu)人員后期維護(hù)的成本偏高
開發(fā)app的情況下僅限于本地icon顯示更鲁，遠(yuǎn)程圖標(biāo)仍然只能使用圖片的形式霎箍。

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

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

image

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

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

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

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

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

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

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