当前位置：首页 > news >正文

CSS 高级技巧

news 2026/2/7 13:23:44

1.精灵图

1.1为什么需要精灵图

1.2 精灵图（sprites）的使用

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引入

2.5字体图标的追加

1.精灵图

1.1为什么需要精灵图

一个网站往往回应用很多的小背景图像作为修饰，当一个网站中图像过多的时候，服务器会频繁的接受和发送请求图片造成服务器请求压力大者将大大降低页面加载的速度。

因此，为了有效的减少服务器接受和发送请求的次数，提高页面加载的速度，出现了CSS精灵技术，也称 css sprite， css雪碧。

（核心原理：将网页中的一些小背景图像整合到一张的图像中，这样服务器只需要一次请求就可以了）

1.2 精灵图（sprites）的使用

使用精灵图的核心：

精灵图技术主要针对于背景图片的使用，就是把多个人小背景图片整合到一张大的图片中。
这个大图片也称为sprites 精灵图或者雪碧图
移动背景图片位置，此时可以使用 background-position
移动距离就是这个目标图片x和y轴坐标，网页中坐标有所不同。
因为一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量，每个图片的大小和位置。

使用精灵图核心总结

精灵图主要针对于小的背景图篇使用
主要借助于背景图片位置俩实现-- background-position
一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）

2.字体图标

2.1字体图标的产生

字体图标的使用场景：主要用于显示网页中通用，常用的一些小图标。

以前都是用精灵图来做的，不过精灵图有很多的缺点。

图片本身还是比较大的。
图片本身放大和缩小都会失真。
一旦图片制作完毕咸阳跟换是非常复杂的。

此时，有一种技术的出现很好的解决了以上问题，即使字体图标iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用，展示的是图标，本质属于字体。

2.2字体图标的优点

轻量级：一个图标要比一系列的图像要小。一旦字体加载了，图片就会马上渲染出来，减少了服务器的请求。
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能代替精灵技术，只是对工作中部分图标的提升和优化

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂的小图片，就用精灵图。

字体图标的使用

字体图标是一些网页常见的小图标，我们直接网上下载即可，因此使用可以分为：

字体图标的下载
字体图标的引用（引入到html网页中）
字体图标的追加（以后添加新的小图标）

2.3字体图标的下载

推荐网站：

https://iconion.com/posts/icomoon/https://iconion.com/posts/icomoon/ IcoMoon 成立于2011年，退出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使他们称一字型，该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速慢。

https://www.iconfont.cn/https://www.iconfont.cn/阿里M2UX的一个iconfont 字体图标库，包含了淘宝图标库和阿里图标库。可以使用Ai制作图标上传代码。免费。

2.4字体图标的引入

下载完毕之后，注意原来的文件不要删除，后面还会使用。

1.把下载包里面的 fonts 文件夹放入页面根目录下。

2.在css样式中全局声名字体：简单理解把这些字体文件通过css引入到我们的页面中。一定要注意字体文件路径问题。

  @font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?p4ssmb');src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

3.html 标签内添加小图标

代码实现：

<!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>Document</title><style>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?p4ssmb');src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: palegoldenrod;}</style>
</head><body><span></span>
</body></html>

2.5字体图标的追加

如果在工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json 重新上传，然后选取自己想要的图标，重新下载压缩包，并替换原来的文件即可。

1.精灵图

1.1为什么需要精灵图

1.2 精灵图（sprites）的使用

2.字体图标

2.1字体图标的产生

2.2字体图标的优点

2.3字体图标的下载

2.4字体图标的引入

2.5字体图标的追加

相关文章：