基於svg生成iconfont矢量字體圖標

對於前端開發，圖標是前端頁面不可缺乏的元素，他能更讓前端頁面更加豐富。前端頁面的初期都是使用圖片，對於小的圖標使用圖片拼成雪碧圖不只影響前端開發的效率，並且圖片文件相對較大也會影響網頁加載的速度。ionfont字體圖標相較於圖片他的優點就是文件大小極小，幾百個圖標才幾十上百kb，可是換成圖片可能已經有幾mb了，其次製做簡單，只需UI提供svg圖標能夠經過工具自動生成字體文件，或者網上有不少免費的圖標庫能夠自動生成矢量字體文件，例如阿里巴巴矢量字體庫。可是iconfont字體圖標由於他就像字體同樣只能設置color屬性，因此他只能是純色的。下面介紹幾種生成方法javascript

一、網上圖標生成網站。以阿里巴巴字體庫爲例。登陸http://www.iconfont.cn/，註冊成功後，能夠建立項目，而後在免費字體庫中選擇本身項目中須要的圖標，放在購物車裏，選擇完了之後將選擇的圖表添加到項目中，而後在項目中將選擇的字體添加到本地。下載下來的文件有.wof，.ttf，.eot，.svg這些是矢量字體文件，稍後解釋這些不一樣格式的區別，還有生成好的css文件，這些就是頁面中須要引用的矢量字體資源。css

二、經過工具生成iconfont字體，這裏介紹經過gulp-iconfont，gulp-iconfont-css生成。html

首先須要全局安裝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的配置：java

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文件：jquery

<!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查看有哪些矢量字體，以下圖ios

最後咱們介紹矢量字體woff,ttf,eot,svg，woff2格式的的區別，以及爲何要將這四種格式都引入。eot格式是兼容ie9如下版本，svg格式是兼容ios4如下版本，ttf，woff格式基本上主流瀏覽器都支持，可是woff格式要比ttf格式的文件小不少，因此加載速度會快不少。最後還有一種woff2這種格式，他是woff的下一代，壓縮率更高，文件大小更小，加載速度更快。web