兴义市住房和城乡建设局网站,app推广方法,黑龙江建设网教育官网,济南做外贸网站字体图标使用场景︰主要用于显示网页中通用、常用的一些小图标 精灵图是有诸多优点的#xff0c;但是缺点很明显。
图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。
此时#xff0c;有一种技术的出现很好的解决了以上问题#xff0c…字体图标使用场景︰主要用于显示网页中通用、常用的一些小图标 精灵图是有诸多优点的但是缺点很明显。
图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。
此时有一种技术的出现很好的解决了以上问题就是字体图标iconfont. 字体图标可以为前端工程师提供一种方便高效的图标使用方式展示的是图标本质属于字体
字体图标的优点
轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了图标就会马上渲染出来减少了服务器请求·灵活性:本质其实是文字可以很随意的改变颜色、产生阴影、透明效果、旋转等 ·兼容性:几乎支持所有的浏览器请放心使用
注意︰字体图标不能替代精灵技术只是对工作中图标部分技术的提升和优化。
字体图标的下载
Icon Font SVG Icon Sets ❍ IcoMoon
iconfont-阿里巴巴矢量图标库
使用步骤
1、fonts文件放在和html同一级
2、style中 复制 字体声明那一段代码
3、打开demo.html复制小方框
4、放字体图标的标签 要指定font-family
宁体图标的追加 如果工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。 把压缩包里面的selection.json 从新上传然后选中自己想要新的图标从新下载压缩包并替换原来的文件即可。
