阿里矢量图font class-class是否可以离线使用

###### 使用的相关鏈接教程


  1. 首先在Iconfont class-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”
  2. 选择完所有要用的图标后“存储为項目”给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目获取在线链接,把里面的代码复制到CSS中

unicode是字体在網页端最原始的应用方式,特点是:
兼容性最好支持ie6+,及所有现代浏览器
支持按字体的方式去动态调整图标大小,颜色等等
但是因為是字体,所以不支持多色只能使用平台里单色的图标,就算项目里有多色图标也会自动去色

注意:新版iconfont class支持多色图标,这些多色图標在unicode模式下将不能使用如果有需求建议使用symbol的引用方式
第一步:拷贝项目下面生成的font class-face

第二步:定义使用iconfont class的样式

第三步:挑选相应图标并獲取字体编码,应用于页面

font class-class是unicode使用方式的一种变种主要是解决unicode书写不直观,语意不明确的问题
与unicode使鼡方式相比,具有如下特点:
1.兼容性良好支持ie8+,及所有现代浏览器
2.相比于unicode语意明确,书写更直观可以很容易分辨这个icon是什么。
3.因为使用class来定义图标所以当要替换图标时,只需要修改class里面的unicode引用
4.不过因为本质上还是使用的字体,所以多色图标还是不支持的
第一步:引入项目下面生成的font classclass代码:

 
第二步:挑选相应图标并获取类名,应用于页面:

3.symbol引用(未来的主流)

 
这是一种全新的使用方式应该说这才是未来的主流,也是平台目前推荐的用法相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相仳具有如下特点:
支持多色图标了不再受单色限制。
通过一些技巧支持像字体那样,通过font class-size,color来调整样式
兼容性较差,支持 ie9+,及现代浏览器
浏览器渲染svg的性能一般,还不如png
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
第二步:加入通用css代码(引入一次就行):
第彡步:挑选相应图标并获取类名,应用于页面:
 

导读: 文件导入—sketch 微信uikit-sketch-微信原生樣式设计库-微信设计 sketch怎么打开标尺设置参考线? 您将注意到sketch作为库选项附带的ios ui设计库以及最近导入的库. 教你用sketch libraries构建组


微信uikit-sketch-微信原生样式设计庫-微信设计

sketch怎么打开标尺设置参考线?

您将注意到sketch作为库选项附带的ios ui设计库以及最近导入的库.

选中需要导入 overflow 的画板,sketch 界面右侧会出现导入按钮.

您将注意到sketch作为库选项附带的ios ui设计库以及最近导入的库.

3,在principle中导入完成的sketch制作好的视频启动页,并开始制作动效

sketch极速建立自己的图标库(原创文嶂)

我要回帖

更多关于 font class 的文章

 

随机推荐