CSS精灵图和字体图标

最新推荐文章于 2022-09-23 09:07:04 发布

God shen

最新推荐文章于 2022-09-23 09:07:04 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/weixin_53655745/article/details/119457381

版权

精灵图字体图标网页优化 HTTP请求页面加载速度

关键词由CSDN通过智能技术生成

精灵图

精灵技术目的:

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。

使用非常简单，只是把所有图片放在一张大图上，然后通过背景图片添加，在移动位置，放在需要的位置处。

随便下载了一个王者荣耀官方下载游戏的图，可以看一下，就是精灵图

把上面那个头的图，写一下代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background-image: url(王者荣耀.png);
            background-position: -182px 0;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

效果：

非常的简单，只是需要精确的量取尺寸，可以借助FW工具，需要lvse的可以私信我哦

字体图标

主要用来制作网页上的一些小图标，举个例子，京东页面上小相机等等非常多，本质上还是字体。

非常好的应用，当然也可以用精良图制作，但是精灵图在本质上还是图片，非常的大，而字体图标的本质是文字，非常小哦！

并且，可以随意改变颜色，大小，内边距哦，而且放大后，不会失真，因为本质是文字！不需要向服务器请求了，兼容几乎所有的浏览器！

上面说了那么多，接下来让我们看看如何获得字体图标

字体图标下载

直接从网上下载：推荐网站 : http://icomoon.io icomoon字库免费哦

点击它，会显示如下窗口

还可以修改上面的图标哦，只需要点击上面的笔

字体图标引入

下载解压后

将font文件夹放入你的包包中

打开style.css 复制@font-face代码，放入你的css文件中，我偷懒写在一个地方了

打开demo.html

复制小框框，直接放在你的代码中，最后添加一下字体族就行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?8ypcxm');
            src: url('fonts/icomoon.eot?8ypcxm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?8ypcxm') format('truetype'), url('fonts/icomoon.woff?8ypcxm') format('woff'), url('fonts/icomoon.svg?8ypcxm#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        span {
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>

效果图

另外一种做法

span::before {
            font-family: 'icomoon';
            content: '\e947';
        }

span中就不需要添加内容了，e947是来自demo哦

当然可以改变图标的样式，本质是文字嘛，大家可以自己试试看哦！

字体图标的追加

当我们发现字体图标不够用时，我们不得不去放进来更多的字体图标，这时候，我们可以这样操作，首先还是打开，下载的网址，进入字体图标库里。

1.点击，将旧的

json文件打开，然后选择yes

2.选择你想要别的图标，点击

就可以下载新的压缩包，再把旧的替换掉，当然最后要把font变成新的喽，那里有你新加入的字体图标，将旧的删掉吧。

你是否学会了呢，给个赞吧，嘿嘿

字体图标有个更合适的使用方法,我做了个补充，有兴趣可以瞅瞅哦！

https://blog.csdn.net/weixin_53655745/article/details/120002705

God shen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS精灵图和字体图标

精良图精良技术目的:为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。使用非常简单，只是把所有图片放在一张大图上，然后通过背景图片添加，在移动位置，放在需要的位置处。随便下载了一个王者荣耀官方下载游戏的图，可以看一下，就是精良图把上面那个头的图，写一下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n.
复制链接

扫一扫