基于svg生成iconfont矢量字体图标
Posted leejay6567
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于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矢量字体图标的主要内容，如果未能解决你的问题，请参考以下文章
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
AI导出svg上传到阿里矢量图标库（Iconfont），图片显示不全