1. 精灵图（缺点明显，故出现字体图标）
<!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> .box1 { width: 60px; height: 60px; margin: 100px auto; background: url(images/sprites.png) no-repeat -182px 0; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
2. 字体图标
主要用于显示网页通用、常用的一些小图标。
有优点有缺点
2.2 重点（字体文件的使用步骤以及注意事项）
2.2 重点（字体文件的使用步骤以及注意事项）
页面在哪里fonts文件夹就放在哪里
四种字体格式的原因是因为兼容性
在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>字体图标的使用</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:pink; } </style> </head> <body> <span></span> <span></span> </body> </html>
