资讯专栏INFORMATION COLUMN

iconfront优化项目图标

Karuru / 1147人阅读

摘要:为什么要使用图标字体使用这项技术总得有使用它的理由那么,我们来分析下的优缺点,看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片,就算图片经过合并。

为什么要使用图标字体
使用这项技术总得有使用它的理由!那么,我们来分析下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/115493.html

相关文章

  • iconfront优化项目图标

    摘要:为什么要使用图标字体使用这项技术总得有使用它的理由那么,我们来分析下的优缺点,看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片,就算图片经过合并。 为什么要使用图标字体 使用这项技术总得有使用它的理由!那么,我们来分析下iconfront的优缺点,看是不是适合正在开发的项目。 优点 1、优化项目工作流程 对于web前端项目中的图标,很多情况下是使用的png图片,但如果图标...

    Riddler 评论0 收藏0
  • 如何在vue中使用iconfront(离线状态 离线字体)

    摘要:端使用文档来源于官方文档用户在可以下载,多种格式的,平台也可将图标转换为字体,便于前端工程师自由调整与调用。 web端使用(文档来源于官方文档) 用户在iconfont.cn可以下载,多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。 第一步:拷贝项目下面生成的font-face @font-face {font-family: iconfont; src...

    baiy 评论0 收藏0
  • [盘点]项目中可以怎么优化图片

    摘要:雪碧图雪碧图就是把很多小的图整合到一起,制作成一张比较大的图,然后作为元素的背景图片使用,定位到相应的图片即可。除此之外,使用雪碧图,有两个个注意地方不要把页面所有的图片都合并,比如把整合会破坏的语义结构。 看似平常的事物,往往会蕴含的巨大的智慧。把看似平常的事物简单做好,可能很正常。如果能把平常的事物做精,做细,这个不平常。 1.前言 每一个开发者在开发项目中,不可避免要和图片打交道...

    lykops 评论0 收藏0
  • [盘点]项目中可以怎么优化图片

    摘要:雪碧图雪碧图就是把很多小的图整合到一起,制作成一张比较大的图,然后作为元素的背景图片使用,定位到相应的图片即可。除此之外,使用雪碧图,有两个个注意地方不要把页面所有的图片都合并,比如把整合会破坏的语义结构。 看似平常的事物,往往会蕴含的巨大的智慧。把看似平常的事物简单做好,可能很正常。如果能把平常的事物做精,做细,这个不平常。 1.前言 每一个开发者在开发项目中,不可避免要和图片打交道...

    hedzr 评论0 收藏0
  • 借助webpack对项目进行分析优化

    摘要:由于项目的不断扩大,只会影响我们定位功能和问题的速度,因此对冗余文件进行清理,是很重要的。我们在项目中使用的,自动将各个图标进行。 进入公司之后,接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档,但是由于项目过于庞大,老旧。包含了打包过慢,冗余文件过多等诸多问题。想要快速的解决这些问题,想要完全把功能重构一遍的话,成本太高了。一个一个文件来过,时间成本也比较大。...

    Me_Kun 评论0 收藏0

发表评论

0条评论

Karuru

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<