自制按钮图标的两种方法： image sprite和svg字体文件

Posted 2020-10-04 动漫引擎

用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/： 字体有收费的