用image sprite和svg字体文件这两种方法,都能够极大地减少小图形文件的数量, 从而减少服务器请求和带宽需求。提高网页的响应速度。
一、建立SVG字体文件
iconmoon 是一个在线工具,可以上传自己的SVG格式的图标文件,也可以从其中选择已有的图标, 定制出自己的字体文件。下载的结果包括了字体文件和一个简单的demo.html,
(https://icomoon.io/app/#/select),
(类似工具: https://glyphter.com)
二、用 image sprite
spritegen是一个在线工具,只要上传自己的image格式的图标文件, 就能够生成sprite文件和对应的css样式
http://css.spritegen.com/
三、自己动手写:
假设小图标已经手工合并到一个大图imageSprite.png中,其中每一个小图标占W*H的大小,W= 100,H=50,那么,css内容如下:(其中的class 名称可以自取)
.icon-demo-base { background: url(‘imageSprite.png‘) no-repeat; display: inline-block; height: 50px; /* 每一个icon的 height和width */ width: 100px;} .icon0-0 { background-position: 0 0; /* sprite图的左上角是(0,0)点, */ }.icon1-0 { background-position: -100px 0;}.icon2-0 { background-position: -200px 0;}.icon3-0 { background-position: -300px 0;}
More:
* 在PS中可以把图像输出为SVG(File > Extract Assets”, 要求Photoshop CC版本高于October 2014 Update, http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/)
* image转SVG的在线工具: https://image.online-convert.com/convert-to-svg
* 如何设置SVG图的原点和基本大小
https://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/
* https://www.sitepoint.com/build-svg-icons/
<img src="Chess_Pieces_Sprite.svg#black-horse">
* gulp-svg-spritesheet
gulp.spritesmith (用canvas,依赖于: Cairo and node-gyp)
* http://fontastic.me/howto
http://fontello.com/: 字体有收费的