基於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矢量字體圖標