码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-02 00:10:31      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:orm   date   前端   配置文件   展示   list   reac   不同   ajax   

对于前端开发,图标是前端页面不可缺少的元素,他能更让前端页面更加丰富。前端页面的初期都是使用图片,对于小的图标使用图片拼成雪碧图不仅影响前端开发的效率,而且图片文件相对较大也会影响网页加载的速度。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矢量字体图标

标签:orm   date   前端   配置文件   展示   list   reac   不同   ajax   

原文地址:https://www.cnblogs.com/leejay6567/p/9251689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!