这里是修真院前端小课堂,本篇分析的主题是
【如何使用IconFont?——矢量图标】
每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【如何使用IconFont?——矢量图标】
1.背景介绍
网上的一些小图标除了可以使用css精灵图制作外,还可以使用现在比较热门的iconfont去制作。那么首先搞清楚一个问题,什么是iconfont?icon font顾名思义,可以理解成icon + font即 图标字体。图标字体,可以理解为是一种特殊的字体,网页中的一些小图标和特殊字符可以通过这种方法实现。简单来说就是把图片当成文字来使用。
2.知识剖析
2.1什么是iconfont?
iconfont,字体图标。通过使用字体格式的矢量图标来代替以往的图片格式的小图标。字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率下面,都可以做到完美缩放和扩大,不会像传统图片一样,增大到一定程度就会出现明显的锯齿或者变得模糊,影响展示效果。