如何使用IconFont?——矢量图标

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用IconFont?——矢量图标相关的知识,希望对你有一定的参考价值。

这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

【如何使用IconFont?——矢量图标】

?

1.背景介绍

网上的一些小图标除了可以使用css精灵图制作外,还可以使用现在比较热门的iconfont去制作。那么首先搞清楚一个问题,什么是iconfont?icon font顾名思义,可以理解成icon + font即 图标字体。图标字体,可以理解为是一种特殊的字体,网页中的一些小图标和特殊字符可以通过这种方法实现。简单来说就是把图片当成文字来使用。

2.知识剖析

2.1什么是iconfont?

iconfont,字体图标。通过使用字体格式的矢量图标来代替以往的图片格式的小图标。字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率下面,都可以做到完美缩放和扩大,不会像传统图片一样,增大到一定程度就会出现明显的锯齿或者变得模糊,影响展示效果。

技术图片

?

2.2 如何使用icon font?

提供icon font的网站有很多,例如阿里巴巴矢量图标库、fontello、icomoon、Font-Awesome、Glyphicon Halflings、Icons8、

我们今天主要就国内使用最多的阿里巴巴矢量图标库进行介绍。

在阿里巴巴矢量图标库中,在web端有四种主要的引用方式,分别是icon单个使用、unicode引用、font-class引用、symbol引用。

icon单个使用,单个图标用户可以自行选择下载不同的格式使用,包括png,ai,svg。此种方式适合用在图标引用特别少,以后也不需要特别维护的场景。

比如设计师用来做demo原型。

前端临时做个活动页。

当然如果你只是为了下载图标做PPT,也是极好的。

不过如果是成体系的应用使用,建议用户把icon加入项目,然后使用下面三种推荐的方式。

?

?

unicode引用,批量引用的方法之一,在网页端最原始的应用方式。兼容性最好,支持ie6+,及所有现代浏览器。支持按字体的方式去动态调整图标大小,颜色等等,由于是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

font-class引用,是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。支持ie8+,及所有现代浏览器。相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。使用class来定义图标,当要替换图标时,只需要修改class里面的unicode引用就可以,比较方便。多色图标还是不支持的。

symbol引用,是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。支持多色图标了,不再受单色限制。支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般,不如png。

3.常见问题

问题: 如何在项目中修改图标的大小和颜色?

4.解决方案

使用一个demo进行演示讲解:

demo

5.编码实战

6.扩展思考

问题: iconfont相比于各种图片格式的小图标的优点和弊端?

优点:

1、轻量性:一个图标字体比一系列的图像要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合html5离线存储做性能优化。

技术图片

?

2、灵活性:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。

3、兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里。

?
技术图片

弊端:

1、图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用。(已经开始支持彩色图标)

2、使用版权上有限制,有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

3、创作自已的字体图标很费时间,重构人员后期维护的成本偏高。

7.参考文献

参考一:分享国内外免费开源的iconfont图标字库

参考二:图标字体运用以及其优势与劣势

参考三:详解CSS中iconfont的使用

参考四:阿里巴巴矢量图标库

?

?

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。

这里是技能树.IT修真院:http://www.jnshu.com,初学者转行到互联网行业的聚集地。"

欢迎加IT交流群565734203与大家一起讨论交流

作者:IT修真院
来源:CSDN
原文:https://blog.csdn.net/jnshu_i...
版权声明:本文为博主原创文章,转载请附上博文链接!

本文转载于:猿2048如何使用IconFont?——矢量图标


以上是关于如何使用IconFont?——矢量图标的主要内容,如果未能解决你的问题,请参考以下文章

阿里矢量图标Iconfont自定义设置菜单图标

vue项目中使用阿里iconfont图标

iOS IconFont矢量图标使用方法

Nuxt使用iconfont矢量图标

微信小程序引入iconfont字体图标(阿里巴巴矢量图标库)

01字体图标iconfont的制作与使用--阿里矢量图库