HTML5开发之 CSS精灵技术和字体图标技术

1.精灵技术

为了避免一写小的图片背景图片很多，然后多次请求服务器的情况下，采用了一张底色为透明的有很多小图标的大图，网页只要请求一次就可以了获取到大图，然后通过背景设置position控制坐标显示不同位置的小图可以实现；

2.文字图标

其实是将图标当成一种文字显示的，需要设置字体；

可以在网上找一些现成的图标

常用的网站：https://icomoon.io

阿里的字体库：http://www.iconfont.cn

1.在icomoon上下载图标的zip包解压后的fonts文件夹拷贝到项目中；

2.在项目中定义字体

		<style type="text/css">
			@font-face {
			    font-family: 'icomoon';
			    src: url('fonts/icomoon.eot');
			    src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
			    	url('fonts/icomoon.woff') format('woff'), 
			    	url('fonts/icomoon.ttf') format('truetype'),
			    	url('fonts/icomoon.svg#shejidaren') format('svg');
			    font-weight: normal;
			    font-style: normal;
			}
			
		</style>

3.引用字体

			span{
				font-family: icomoon;
				font-size: 100px;
				color: red;
			}

4.显示有两种方法

4.1 第一种复制拷贝法

在官网上显示的突变后面复制

粘贴到代码中，代码中显示是看不见的；保存刷新浏览器就可以看到图标了；

4.2第二种是标签头添加图标内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			@font-face {
			    font-family: 'icomoon';
			    src: url('fonts/icomoon.eot');
			    src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
			    	url('fonts/icomoon.woff') format('woff'), 
			    	url('fonts/icomoon.ttf') format('truetype'),
			    	url('fonts/icomoon.svg#shejidaren') format('svg');
			    font-weight: normal;
			    font-style: normal;
			}
			span::before{
				font-family: icomoon;
				font-size: 100px;
				color: red;
				content: "\e97f";/*一定要加一个反斜杠\*/
			}
		</style>
	</head>
	<body>
		<span></span>
	</body>
</html>

HTML5开发 之 CSS精灵技术 和 字体图标技术

1.精灵技术

2.文字图标

猜你喜欢

HTML5开发之 CSS精灵技术和字体图标技术