CSS精灵图、字体图标

最新推荐文章于 2023-07-03 19:29:03 发布

weixin_44197665

最新推荐文章于 2023-07-03 19:29:03 发布

阅读量162

点赞数

分类专栏： Web前端入门笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_44197665/article/details/109594141

版权

Web前端入门笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

精灵图、字体图标

文章目录

精灵图、字体图标

精灵图

一个页面上可能有很多小图标，每个图标的加载都需要向服务器发送一次请求，这样加载一个页面就会请求很多次服务器，拖慢加载速度也增加了服务器负担。
这时就需要用到精灵图技术，把所有小图标拼成一个大图片，一次性的请求下来然后再拆分到各自要用的地方。

原理

将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来移动背景图，实现背景图片的定位技术。
移动的距离就是目标图表的坐标，注意y轴是向下的。

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				margin: 50px;;
			}
				
			#box a{
				display: block;
				width: 74px;
				height: 20px;
				border: 1px solid #ccc;
				color: black;
				font-size: 12px;
				text-decoration: none;
				text-align: center;
				border-top: none;
				padding-top: 54px;
				background-image: url(https://img-blog.csdnimg.cn/20191218152749310.png);
			}
			#box #zone{
				border-top:1px solid #CCCCCC;
				background-position: -17px 4px;
				background-repeat: no-repeat;
			}
			#box #zone:hover{
				background-position: -17px -98px;
			}
			#box #mail{
				background-position: -12px -186px;
				background-repeat: no-repeat;
			}
			#box #mail:hover{
				background-position: -12px -286px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<a href="#" id="zone">空间</a>
			<a href="#" id="mail">邮箱</a>
		</div> 
	</body>
</html>

效果图示：
精灵图样例

字体图标

字体图标就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样，用于结构和样式简单的小图标，我们可以像控制文字一样通过CSS来控制它的大小和颜色。

使用流程

1.下载兼容性字体文件包到本地

下载地址：http://www.iconfont.cn/

2.把字体文件包引入到html页面中

将加入购物车的图标添加到项目，然后在线生成代码，再把这段代码在css全局声明，形如：

@font-face {
  font-family: 'iconfont';  /* project id 2193318 */
  src: url('//at.alicdn.com/t/font_2193318_w9eomzyen8.eot');
  src: url('//at.alicdn.com/t/font_2193318_w9eomzyen8.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2193318_w9eomzyen8.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2193318_w9eomzyen8.woff') format('woff'),
  url('//at.alicdn.com/t/font_2193318_w9eomzyen8.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2193318_w9eomzyen8.svg#iconfont') format('svg');
}

然后挑选相应图标并获取字体编码，应用于页面
形如：

<i class="iconfont">&#x33;</i>

其他使用方法：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d0091c141&helptype=code

weixin_44197665

关注

0
点赞
踩
0

收藏

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

精灵图、字体图标文章目录精灵图、字体图标精灵图原理代码字体图标使用流程1.下载兼容性字体文件包到本地2.把字体文件包引入到html页面中精灵图一个页面上可能有很多小图标，每个图标的加载都需要向服务器发送一次请求，这样加载一个页面就会请求很多次服务器，拖慢加载速度也增加了服务器负担。这时就需要用到精灵图技术，把所有小图标拼成一个大图片，一次性的请求下来然后再拆分到各自要用的地方。原理将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-pos
复制链接

扫一扫