前端研习录（14）——CSS雪碧图及字体图标讲解及示例说明

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入CSS雪碧图及字体图标部分

一、雪碧图（CSS Sprite）

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片的处理方式，它可以将一个页面涉及到的零星图片都包含在一张大图中去（比如表情图），如下：
在这里插入图片描述

优点：

减少图片的字节
减少网页的http请求，从而大大提高页面的性能

实现原理：

通过 background-image 引入背景图片
通过 background-position 把背景图片移动到自己需要的位置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>

    <style>
        .emo1{
            display: block;
            width: 40px;
            height: 40px;
            background-image: url(./img/emoticon.png);
        }
    style>
head>
<body>
    <span class="emo1">span>    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下：
在这里插入图片描述
如果需要显示其他表情的话，则只需通过background-position调整位置即可，如下：

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>

    <style>
        .emo1{
            display: block;
            width: 40px;
            height: 40px;
            background-image: url(./img/emoticon.png);
            background-position: -39px 0px;
        }
    style>
head>
<body>
    <span class="emo1">span>    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果如下：
在这里插入图片描述
以上便是雪碧图的使用方法及效果

二、字体图标

在网页中如果我们使用的图标比较多时，页面加载就会出现慢、图标失真的情况，所以我们一般用字体图标的方式来显示图标，既解决了失真的问题，也解决了多个图标图片占用资源过多的问题，具有以下几个优点：

轻量性：加载速度快，减少http请求
灵活性：可以利用CSS设置大小颜色等
兼容性：网页字体支持所有现代浏览器，包括IE低版本浏览器

推荐使用：阿里字体图标库（地址：https://www.iconfont.cn/），进入页面后先进行注册/登录，然后搜索并选取想要的图标——添加购物车——下载代码——引用即可，方式如下：

在这里插入图片描述

下载之后打开上图所示页面即可看到使用方法，以使用class方式做为示例，代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <link rel="stylesheet" href="./font/font_n90ltsoqtms/iconfont.css">

    <style>
        .logo{
            font-size: 30px;
            color: red;
        }
    style>
head>
<body>
    <span class="iconfont icon-dingwei logo">span>    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下：
在这里插入图片描述
以上就是字体图标的内容

相关阅读:
Ubuntu22.04源码安装ROS-noetic(ROS1非ROS2)，编译运行VINS-MONO
构建未来交通：香橙派OPI Airpro上的智能交通监管系统
Android应用内组件通讯之EventBus源码分析之初始化与订阅（二）
安装配置 IDE
洛谷P5613 黑蚊子多
Mysq优化---mysql安装与配置（Lunix环境）
DockerCompose部署es和kibana
如何将 PDF 转换为 Word：前 5 个应用程序
java this用法
Vue中props组件和slot标签的区别

原文地址：https://blog.csdn.net/WXKKang/article/details/126135764