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

最新推荐文章于 2024-08-02 18:21:33 发布

清风不渡

最新推荐文章于 2024-08-02 18:21:33 发布

阅读量571

点赞数

分类专栏：前端研习录文章标签：前端 css css3

本文链接：https://blog.csdn.net/WXKKang/article/details/126135764

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（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>

效果如下：
在这里插入图片描述
如果需要显示其他表情的话，则只需通过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>

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

二、字体图标

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

轻量性：加载速度快，减少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>