icon-font-generator 的使用像素完美（Pixel Perfection）、分辨率无关（Resoluti

像素完美（Pixel Perfection）、分辨率无关（Resolution Independent）和多平台体验一致性是设计师们的追求。可访问性（Accessability）、加载性能和重构灵活性是前端工程师们关心的主题。

由于在互联网上没有找到该命令的博文，所以在此记录一下使用过程和踩坑记录。

准备工作

首先，进入npm官方网站，找到icon-font-generator的使用介绍 www.npmjs.com/package/ico…

接着往下翻，找到该命令的实例和使用命令。

打开git命令下载icon-font-generator

准备工作大致已经完成，我们现在去阿里巴巴矢量图标图下载几张svg图片存放到文件夹下，然后执行脚本，

我们在icon_dist就可以看到生成的文件

打开icon.html，我们就可以预览可以使用的图标

使用

最简单的使用流程是：

将icon.css引入到index.html中
css中输入 "icon icon-文件名"

<!DOCTYPE html>
<html>
<head>
	<title>测试内容</title>
	<link rel="stylesheet" type="text/css" href="./icon_dist/icons.css">
</head>
<body>
	<i class="icon icon-send"></i>
</body>
</html>

在浏览器中打开index.html：

踩坑记录：

svg图片必须是1024*1024的,有两种方式可以实现

1>要么是下载的时候直接更改大小

2> 代码层面更改就是直接更改svg的代码为1024

如果执行package.json中的脚本时,提示命令找不到。那么此时跟操作系统有关系。因为在不同的操作系统中指定的是物理路径。
每次添加一个svg时，都必须重新执行一遍命令
如果svg图片不是1024，那么编译后的css会错乱