> 웹 프론트엔드 > HTML 튜토리얼 > 通过font-awesome案例来学习 css sprite和svg sprite_html/css_WEB-ITnose

通过font-awesome案例来学习 css sprite和svg sprite_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:40:33
원래의
1268명이 탐색했습니다.

问题:font-awesome里面的小图标是怎么产生的?

1.打开浏览器调试工具,发现font-awesome user这个小图标,其css样式是.

icon-user:before {  content: "\f007";}[class^="icon-"]:before, [class*=" icon-"]:before {  text-decoration: inherit;  display: inline-block;  speak: none;}
로그인 후 복사

2.根据css文件路径,我们打开font-awesome.css发现它是引用了css3 @font-face这个属性。

@font-face {  font-family: 'FontAwesome';  src: url('../font/fontawesome-webfont.eot?v=3.2.1');  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');  font-weight: normal;  font-style: normal;}
로그인 후 복사

3.我们顺着src:url()找到其图标svg

其路径为url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
我们用sublime打开路径下的svg图,由于SVG是 XML 格式,因此可以支持通常用 XML 工具和库进行的转换和生成。具体的教程链接:XML 问题: 使用 SVG 编程

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />
로그인 후 복사

4.发现content:'\f007'对应的就是上文的unicode=“oo7”。

写到这里大家也许有点清晰了font-awesome里的图标是怎么来的,不过还是有点稀里糊涂的,一定有很多问题会问:

svg图是什么? 怎么生成的?
把所有的图标都做成一张svg图片意义何在?
它和css sprite有什么区别呢?

哈哈,其实我和大家也一样,很好奇,于是查看了很多文档。原来早已经有大神研究过了。我会一一放上链接的,这里我先谈一下我的几点认识

css-sprite

1.先说什么是css sprite?
css sprite又叫css精灵或css雪碧图,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、这个很关键,因为每一个http请求都是长连接,我们都知道http开销是很大的,像一些购物网站,如果那么多图标都是标签引入的,那后果不堪设想。css-sprite的设计就是提升页面访问速度和网站请求资源开销的。
2.css-sprite实现的原理
css-sprite通过background-position这个css3新增属性来实现.我们可以一次性引入图片文件,通过设置background-size来切割小图标,然后通过css-position来给具体的小图标icon定位
3.如何制作css-sprite

1.慕课网上有远人老师的视频,教你如何做一个css-sprite。传送门:CSS Sprite雪碧图应用

2.windows开发者可以直接百度css-sprite制作工具,工具很多。
3.用sass编译的同学可以直接使用compass自动合并css雪碧图,教程链接地址
4.可以用ps和AI人工拼图

4.css-sprite缺点:拼图和后期维护的成本比较大。
我们可以通过

svg sprite

这里因为我了解的不是很多,而且我本人也是根据张鑫旭大神的技术博客学习的,所以直接贴地址:

未来必热:SVG Sprite技术介绍

<br /><br /><svg>  <defs>    <g id="shape">        <rect x="0" y="0" width="50" height="50" />        <circle cx="0" cy="0" r="50" />    </g>  </defs>  <use xlink:href="#shape" x="50" y="50" />  <use xlink:href="#shape" x="200" y="50" /></svg>
로그인 후 복사

总结:
symbol + use => SVG Sprite。而且在HTML层面,图标使用的代码成本,跟传统的CSS Sprite或者流行的font-face几乎无异,代码简洁,而且很好维护。所有的SVG图标都在一个SVG源上。retina良好,尺寸可任意拉伸,且颜色可控,真乃Web图标的未来之星。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿