提问
- 提需求的人图标样式(颜色)要换?
- 图标如何满足不同的分辨率以及清晰度?
- 图标太多导致项目体积越来越大,如何瘦身?
- 按钮状态切换只用一个图标,例如点击和松开,甚至更多的状态?
用字体来代替图标 阿里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脚本
执行脚本,生成的.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可以存放在该目录下互不冲突
来源:CSDN
作者:skyMaster2018
链接:https://blog.csdn.net/qq_29622139/article/details/104091480