页面中图标的使用-要饭的

来源：懂视网责编：小采时间：2020-11-27 16:43:22

页面中图标的使用-要饭的

页面中图标的使用-要饭的:之前说要整理这块内容，分享给大家，工作原因，直到现在，赶上清明宅在家里，赶紧整理出来与大家分享。精灵图（CSS sprite）所谓精灵图，其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的（减少请求）。在用到这些图片的

推荐度：

点击下载本文 文档为doc格式

导读页面中图标的使用-要饭的:之前说要整理这块内容，分享给大家，工作原因，直到现在，赶上清明宅在家里，赶紧整理出来与大家分享。精灵图（CSS sprite）所谓精灵图，其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的（减少请求）。在用到这些图片的

之前说要整理这块内容，分享给大家，工作原因，直到现在，赶上清明宅在家里，赶紧整理出来与大家分享。

精灵图（CSS sprite）
所谓精灵图，其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的（减少请求）。

在用到这些图片的时候，需要引用整张图片然后设定坐标到需要的那张小图上。

还有就是：图片根据颜色分组，分成多个文件。每张图只有一种颜色，这样让每张图片变得更小。

当然，这根据当前项目来选择适于你的方案。主要根据下面两个属性来处理精灵图：

1 background-image: url(".../*.png");
2 background-position: 0px 0px;
3 
4 /* 注意：position的负值情况。 */

先上几个图标网站，因为下面要介绍字体图标了：

> [fortawesome.github.io]

> [icomoon.io]

> [阿里图标库]

> [Font Awesome 3.0]

字体图标在html中的使用

1 﨡
2

 1 @font-face{
 2 font-family: "my-icon"
 3 src: url("../*.eot");
 4 /* ie低版本浏览器需要加'?' 否则可能回报404错误 */ 
 5 src: url("../ *.eot?") format("embedded-opentype")
 6 ,url("../ *.woff") format("woff")
 7 ,url("../ *.ttf") format("truetype")
 8 ,url("../ *.svg") format("svg");
 9 font-weight: normal;
10 font-style: normal;
11 }
12 .i-icon{
13 font-family: "my-icon";
14 font-style: normal;
15 font-weight: normal;
16 font-size: 26px;
17 -webkit-font-smoothing: antialiased; /*消除锯齿*/
18 -moz-osx-font-smoothing: grayscale; /*消除锯齿*/
19 }

字体图标在css中的使用

1 
2

@font-face {
 font-family: "myfont";
 src: url("../ *.eot");
 src: url("../ *.eot?#iefix") format("embedded-opentype"), 
 url("../ *.woff") format("woff"), 
 url("../ *.ttf") format("truetype"), 
 url("../ *.svg") format("svg");
 font-weight: normal;
 font-style: normal;
 }
 .icon {
 font-family: "myfont";
 font-weight: normal;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
 .icon-magic:before {
 content: "\c210";
 }

各种方式对比

	精灵图	在html中	在css中
原理	使用图片定位	@font-face	@font-face
兼容	+	+	不支持低版本IE
维护成本	比较困难	简单	简单
颜色	丰富	色彩单一	色彩单一
缩放	失真	清晰	清晰

页面中图标的使用-要饭的

推荐度：

点击下载本文 文档为doc格式

标签：图标使用页面

热门焦点

页面中图标的使用-要饭的

页面中图标的使用-要饭的

页面中图标的使用-要饭的

最新推荐

猜你喜欢

热门推荐