如果你对iconfont有所了解,那你一定对这次iconfont做出的更新产生兴趣。没错,iconfont目前已经升级为iconfont+,并且能够支持大家都很期待的彩色图标。 之前,大家也以文字的形式实现过网页中的图标和特殊字符,现在,使用全新的彩色图标一定更能体现

symbol引用: 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点: 支持多色图标了,不再受单色限制。 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持 ie9+,及现代浏览器。 浏览器渲染svg的性能一般,还不如png。 这种全新的使用方式,据官网介绍说是做了一个svg的集合,SVG(Scalable Vector Graphics)可缩放矢量图形,SVG具有什么特点呢? SVG特点: 1.任意放缩。(用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。) 2.文本独立。(SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。) 3.较小文件。(总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。) 4.超强显示效果。(SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。) 5.超级颜色控制。(SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。) 由于svg的格式优点是基于xml可扩展标记语言,是一个XML文件,而且SVG是被设计用于互联网,所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML,同样也可以在浏览器中动态地创建、修改和删除图片。 因此在网页中使用svg与其他图像格式相比(比如 JPEG 和 GIF)的优势在于: SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 而浏览器的支持情况,iconfont官网也有说明: Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本,可通过安装Adobe SVG Viewer以支持SVG。 iconfont官网描述浏览器渲染svg的性能一般,还不如png,实测了一下做了几个彩色小icon,现代浏览器对svg渲染其实也相当不错了。而且iconfont平台也是推荐这种全新的使用方式,现在互联网技术迅猛发展,相信不久的将来这种使用方式会是未来的主流。 介绍了那么多,那么来做个小案例体验一下。 首先还是到iconfont官网,这次找几个彩色的图标:

image1网页导航栏多色图标库,点进去会发现很多多色图标库的集合:</div></body></html>

版权声明:本文为waiwei原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/waiwei/p/11995857.html