引自慕课网
用字体在网页中画ICON图标
当时字体图标不支持多色,不过在2016-10,阿里妈妈矢量图标平台支持了多色矢量图标。
点击这里:iconfont阿里妈妈矢量图标平台iconfont+全新上线
一、CSS Sprite
在国内称为“CSS雪碧”,也叫“CSS精灵”。
它是把网页中一些零星背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置,因此也叫“图片拼合”技术。
-
1.技术要点
- 1)background-image
- 2)background-position 2.特点
- 1)相对于单个小图标,它节省文件体积和服务器请求次数
- 2)一般情况下,需要保存为PNG-24的文件格式
- 3)可以设计出丰富多彩的颜色图标 3.难点
- 1)需要预先确定每个小图标的大小
- 2)注意小图标与小图标之间的距离
- 3)细心+耐心
二、font+HTML(unicode引用)
用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。
-
1.技术要点
- 1)@font-face
/*font-face声明字体*/
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'),/* chrome,firefox,opera,Safari,Android,iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
字体文件格式:
EOT:Embedded OpenType Fonts
微软开发的用于嵌入网页中的字体,IE专用字体。
WOFF:The Web Open Font Format
Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本。2009年被开发,如今被W3C组织推荐标准。
TTF:TrueType Fonts
1980s,由Microsoft和Apple联合开发的一套字体标准,是Mac OS和WIN操作系统中最常见的一种字体。
SVG:SVG Fonts
用于SVG字体渲染的一种格式,它是由W3C制定的开放标准的图形格式。
-
2.优点
- 1)自由变化大小
- 2)自由修改颜色
- 3)可以添加一些视觉效果如:阴影、旋转、透明度。
- 4)兼容IE6 3.推荐icon网站
-
1)
icomoon
Icon Font & SVG Icon Sets ❍ IcoMoon,Pixel Perfect Icon Solutions
SVG字体和图标图标集❍icomoon,图标像素的完美解决方案
https://icomoon.io -
2)
iconfont,阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
http://www.iconfont.cn/plus -
3)
Font Awesome,为 Bootstrap 而创造的图标字体
http://www.bootcss.com/p/font-awesome
注:字体编码属于16位进制,需注意书写规范,&#,分号;,一个不能少,否则会在ie8下出现打印图标,显示不符问题。
<i class="iconfont">!</i>
三、font+CSS(font-class引用)
- 1)@font-face
- 2)css伪元素
结合css伪元素,将小图标对应的html代码,写入样式中,调用即可。1.技术要点
/*16进制,需加'\'*/
.icon-open:before {
content: "\e605";
}
before伪元素
伪元素:创建一个虚假的元素,并插入到目标元素内容之前
四、三种图标字体的比较
CSS Sprite | font+HTML | font+CSS | |
---|---|---|---|
原理 | 背景图片定位 | @font-face | @font-face |
兼容性 | 完美 | 完美 | 不支持IE低版本 |
图标颜色 | 丰富 | 单一 | 单一 |
缩放 | 失真 | 高清 | 高清 |
后期维护 | 困难 | 简单 | 简单 |
使用率 | 高 | 一路看涨 | 一路看涨 |