编程那点事编程那点事

专注编程入门及提高
探究程序员职业规划之道!

svg/ttf/eot/woff/woff2字体库导出单独svg文件上传iconfont.cn

手头有个项目用到了iconfont图标,iconfont.cn只支持单个svg图标的导入,想来也奇怪的,既然我导出图标文件iconfont.svg,为什么我导入就不支持呢?

像我以前的做法是在https://icomoon.io/app/#/select上一个个的导出,但是这样效率太慢。我现在的做法是这样的。

1、在浏览器中输入https://kekee000.github.io/fonteditor/

网上的一些教程可能会要求你打开http://font.baidu.com/editor/,但是现在已经打不开了

2、导入字体文件

导入svg文件

3、导入成功如下图所示

svg图标导入成功

4、在浏览器中输入f12,然后在console中输入如下代码

var stop=0;
var time=500;
$("#glyf-list .glyf-item").each(function(e,i){
	if(stop==0){
		setTimeout('console.log("Start",'+e+')',time); 
		setTimeout('$("#glyf-list .glyf-item:nth-child('+e+')").click();console.log("选中",'+e+');',time); 
		time=time+500;
		setTimeout('$("#glyf-list-commandmenu > li:nth-child(11)").click();console.log("点击导出",'+e+')',time); 
		time=time+500;
		setTimeout('$("#glyf-download-svg").click();console.log("点击下载SVG",'+e+')',time); 
		time=time+1000;
		setTimeout('$("#model-dialog > div > div > div.modal-header > button > span:nth-child(1)").click();console.log("关闭弹框",'+e+')',time); 
		setTimeout('console.log("End",'+e+')',time); 
		time=time+500;
	}
});

以上代码,其实就是自动的下载字体图标的单独svg。

手动导出svg字体图标

5、下载成功后的svg图标,至于下载之后,如何导入iconfont.cn我这里就不再截图说明了,很简单。

单独的svg字体图标文件

 

未经允许不得转载: 技术文章 » 前端开发 » svg/ttf/eot/woff/woff2字体库导出单独svg文件上传iconfont.cn

相关推荐