基于svg生成iconfont矢量字体图标

对于前端开发，图标是前端页面不可缺少的元素，他能更让前端页面更加丰富。前端页面的初期都是使用图片，对于小的图标使用图片拼成雪碧图不仅影响前端开发的效率，而且图片文件相对较大也会影响网页加载的速度。ionfont字体图标相较于图片他的优势就是文件大小极小，几百个图标才几十上百kb，但是换成图片可能已经有几mb了，其次制作简单，只需UI提供svg图标可以通过工具自动生成字体文件，或者网上有很多免费的图标库可以自动生成矢量字体文件，例如阿里巴巴矢量字体库。但是iconfont字体图标因为他就像字体一样只能设置color属性，所以他只能是纯色的。下面介绍几种生成方法

1、网上图标生成网站。以阿里巴巴字体库为例。登录http://www.iconfont.cn/，注册成功后，可以创建项目，然后在免费字体库中选择自己项目中需要的图标，放在购物车里，选择完了以后将选择的图表添加到项目中，然后在项目中将选择的字体添加到本地。下载下来的文件有.wof，.ttf，.eot，.svg这些是矢量字体文件，稍后解释这些不同格式的区别，还有生成好的css文件，这些就是页面中需要引用的矢量字体资源。

2、通过工具生成iconfont字体，这里介绍通过gulp-iconfont，gulp-iconfont-css生成。

首先需要全局安装gulp然后安装gulp-iconfont和gulp-iconfont-css。具体的配置文件代码

var gulp = require('gulp'),
iconfont = require('gulp-iconfont'),
iconfontCss = require('gulp-iconfont-css');
gulp.task('iconfont', function () {
    let svg ='./svgs/*.svg';
    let fontName = 'iconfont';
    gulp.src(svg).pipe(iconfontCss({
		fontName: fontName,
		targetPath: 'font.css', //生成的css样式的路径
		fontPath: './' //生成的iconfont的路径
    })).pipe(iconfont({
		fontName: fontName, // required
		prependUnicode: true, // recommended option
		formats: ['ttf', 'eot', 'woff', 'svg'], // default, 'woff2' and 'svg' are available
		timestamp: new Date().getTime()
	})).pipe(gulp.dest('./dist'));
});

　　我们将svg字体文件放到配置文件同级的svgs文件夹内，运行gulp iconfont就可以生成iconfont字体文件和对应的css，放在dist目录下。这里生成矢量字体文件已经生成好了，但是在实际项目中，我们需要知道字体库里有哪些图标字体，这样就不会重复生成图标。所以我们还要搭建一个展示图标的服务。这里我们使用koa启web服务，需要安装koa，koa-static， koa-router包。我们在根目录下生成server.js。dist目录下新建index.html用来展示图标的网页，server.js的配置：

const koa = require('koa');
const koa_static = require('koa-static');
const path = require('path')
const router = require('koa-router')();
const fs = require('fs');

const app = new koa();

app.use(koa_static('./dist'))

router.get('/geticonfont', function (ctx, next){
	let arr = fs.readdirSync('./svgs')
	let tmp = [];
	arr.forEach(item=>{
		tmp.push(item.split('.')[0])
	})
	ctx.body = {
		status: 200,
		data: tmp
	}
	next();
	
})
app.use(router.routes()).use(router.allowedMethods());

app.listen('8097', function (){
	console.log('listening 8097');
})

　　这里我们写了一个获取ionfont图标的接口‘/geticonfont’，用来读取svgs文件夹下的文件名。html文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>iconfont</title>
	<link rel="stylesheet" href="./font.css">
	<style>
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		ul li{
			font-size: 40px;
			float: left;
			width: 120px;
			text-align: center;
			margin: 20px;
		}
		ul li p{
			font-size: 14px;
			margin-top: 0px;
		}
	</style>
</head>
<body>
	<ul>
		<ul id="wrap"></ul>
	</ul>
	<script src="./jquery.min.js"></script>
	<script>
		$(function (){
			$.ajax({
				url:'/geticonfont',
				method: 'get',
				data: {},
				success: function (res){
					var arr = [];
					for(var i=0;i<res.data.length;i++){
						arr.push('<li><i class="icon icon-'+res.data[i]+'"></i><p>icon-'+res.data[i]+'</p></li>')
					}
					$('#wrap').html(arr.join(''));
				}
			})
			$('#wrap').html()
		})
	</script>
</body>
</html>

　　html文件放在dist目录下。这样就配置完成了，只要启服务server.js就可以在本地访问localhost:8097查看有哪些矢量字体，如下图

最后我们介绍矢量字体woff,ttf,eot,svg，woff2格式的的区别，以及为什么要将这四种格式都引入。eot格式是兼容ie9以下版本，svg格式是兼容ios4以下版本，ttf，woff格式基本上主流浏览器都支持，但是woff格式要比ttf格式的文件小很多，所以加载速度会快很多。最后还有一种woff2这种格式，他是woff的下一代，压缩率更高，文件大小更小，加载速度更快。

基于svg生成iconfont矢量字体图标

猜你喜欢