• 丁鹿学堂前端培训：前端性能优化css篇（一）

    css使用字体图标
    使用字体图标的好处
    1. 放大以后不会失真
    2. 可以很方便设置图标的颜色
    3. 字体图标比图片占用资源少，可以作为性能优化的点。
    字体图标的使用

    使用阿里巴巴矢量图标库可以使用字体图标。
    1.进入阿里巴巴iconfont字体网站，选择自己想要的图标，加入到购物车。
    2.点击购物车，选择下载代码
    3.下载的是一个压缩文件，解压后把incofont.ttf 和iconfont.css放入到自己的项目文件里
    4 在使用页面中引入css文件，使用的哪个图标，就去找对应的类名即可。
    对应的类名在下载的demo_index.html里查找即可
    在这里插入图片描述

    "stylesheet" href="./iconfont.css">
 "iconfont icon-1">

    • 1
    • 2

    css使用精灵图

    精灵图又称雪碧图，来源于英文sprite，是一种图片合成技术，将各种小图片合并到一个大图片上，利用css的背景图定位显示不同的图标。

    使用精灵图的好处

    1.减小网页http请求的数量，加快网页响应速度，减少服务器压力
    2.减少图片的总大小

    具体使用

    本质上是利用背景图定位显示不同的小图标。

        

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
  • 相关阅读:
    第17章 其他数据库日志【4.日志与备份篇】【MySQL高级】
    sed命令使用总结
    FPGA IIC SLAVE 实现
    C/C++ 线程超详细讲解（系统性学习day10）
    认识WebAPi
    LabImg安装与使用
    RabbitMQ生产者的可靠性
    python数据分析-把.py文件转成exe可执行文件相关
    『C语言进阶』指针进阶(一)
    CompletableFuture方法介绍及代码示例
  • 原文地址：https://blog.csdn.net/qq_38525381/article/details/126621936