手记

虾哥技术随笔2022-9-2

文章目录
iconfont-阿里巴巴矢量图标库使用教程
一、前言
二、使用步骤
三、运行效果
一、前言
iconfont-阿里巴巴矢量图标库

矢量化图标可以协助我们制作HTML,比直接插入img更快捷,页面效果也更好。它有很多优点:

图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」,这一点图片需要另外制作两倍图,而且缩放后立马就「有码了」。在制作上,不单单是图标设计为两倍就完事了,需要在整个页面设计的时候就要是两倍尺寸的,这对于设计师来说,成本太大(虽然这是趋势)。

让样式回归CSS具体而言,就是指使用iconfont后,因为图标就是字体。我们可以用CSS来灵活控制图标的大小、颜色、阴影等。传统的 CSS Sprites 我们只能重新设计后再「切图」,虽然现在有很多自动拼合工具,但是依然繁琐。进一步的,如果不用兼容IE6-7后,我们完全可以用CSS伪元素来生成图标。也就是说假如图标编码改变了,不用再改动HTML中的编码,只用修改 content 中的编码,达到真正目的上的CSS来控制图标。

图标规范化通过iconfont平台,我们可以高效快速的生产出规范的图标。现在可以直接通过平台上传SVG或ESP文件,就可以转换成字体图标了。

自动上传到阿里云CDN通过平台生成的字体,自动存储到阿里云CDN,免费加速。

流量最小化在移动设备,节约流量是我们前端把控用户体验关键而又容易忽视的一个环节。通常一个项目中,我们并不需要一套大而全图标库,也许我只是需要其中的一个关闭按钮(o)/~。通过平台可以点选自己需要的图标,重新生成一份字体,减少字体体积,节约流量的同时带来更快的加载速度。
————————————————

0人推荐
随时随地看视频
慕课网APP