摘要:为什么要使用图标字体使用这项技术总得有使用它的理由那么,我们来分析下的优缺点,看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片,就算图片经过合并。
为什么要使用图标字体
使用这项技术总得有使用它的理由!那么,我们来分析下iconfront的优缺点,看是不是适合正在开发的项目。优点
1、优化项目工作流程
对于web前端项目中的图标,很多情况下是使用的png图片,但如果图标颜色要修改,就会要UI修改png图片;这时,我们的iconfront就发挥作用了,因为它是字体,所以可以像字体一样修改颜色(如:"color:#333");这样无疑可以降低部分工作量。
2、优化项目性能
字体的加载速度快于图片,就算图片经过合并。
3、永不失真
因为PNG图片是位图,如果尺寸不合适,就会失真(跟打马赛克差不多);而字体再怎么方大缩小也不会。缺点
1、提高对UI的要求
UI对界面的设计往往是一个PS就能搞定,而如果使用图标字体(iconfront),就需要设计对应的svg矢量图,PS就无法做到,目前主要是用AI(Adobe Illustrator),这就提高了对UI的要求如何简单愉快地使用图标字体
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50331.html
摘要:为什么要使用图标字体使用这项技术总得有使用它的理由那么,我们来分析下的优缺点,看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片,就算图片经过合并。 为什么要使用图标字体 使用这项技术总得有使用它的理由!那么,我们来分析下iconfront的优缺点,看是不是适合正在开发的项目。 优点 1、优化项目工作流程 对于web前端项目中的图标,很多情况下是使用的png图片,但如果图标...
摘要:端使用文档来源于官方文档用户在可以下载,多种格式的,平台也可将图标转换为字体,便于前端工程师自由调整与调用。 web端使用(文档来源于官方文档) 用户在iconfont.cn可以下载,多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。 第一步:拷贝项目下面生成的font-face @font-face {font-family: iconfont; src...
摘要:雪碧图雪碧图就是把很多小的图整合到一起,制作成一张比较大的图,然后作为元素的背景图片使用,定位到相应的图片即可。除此之外,使用雪碧图,有两个个注意地方不要把页面所有的图片都合并,比如把整合会破坏的语义结构。 看似平常的事物,往往会蕴含的巨大的智慧。把看似平常的事物简单做好,可能很正常。如果能把平常的事物做精,做细,这个不平常。 1.前言 每一个开发者在开发项目中,不可避免要和图片打交道...
摘要:雪碧图雪碧图就是把很多小的图整合到一起,制作成一张比较大的图,然后作为元素的背景图片使用,定位到相应的图片即可。除此之外,使用雪碧图,有两个个注意地方不要把页面所有的图片都合并,比如把整合会破坏的语义结构。 看似平常的事物,往往会蕴含的巨大的智慧。把看似平常的事物简单做好,可能很正常。如果能把平常的事物做精,做细,这个不平常。 1.前言 每一个开发者在开发项目中,不可避免要和图片打交道...
摘要:由于项目的不断扩大,只会影响我们定位功能和问题的速度,因此对冗余文件进行清理,是很重要的。我们在项目中使用的,自动将各个图标进行。 进入公司之后,接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档,但是由于项目过于庞大,老旧。包含了打包过慢,冗余文件过多等诸多问题。想要快速的解决这些问题,想要完全把功能重构一遍的话,成本太高了。一个一个文件来过,时间成本也比较大。...
阅读 2429·2021-11-17 09:33
阅读 696·2021-11-04 16:13
阅读 1296·2021-10-14 09:50
阅读 655·2019-08-30 15:53
阅读 3622·2019-08-30 14:18
阅读 3236·2019-08-30 14:14
阅读 2056·2019-08-30 12:46
阅读 3156·2019-08-26 14:05