iconfont怎么用[编辑]

---

一、iconfont软件工具介绍

利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。

二、iconfont优点

1、自由变化大小

2、自由修改颜色

3、可以添加一些视觉效果如：阴影、旋转、透明度。

4、兼容IE6

三、如何制作 iconfonts？

利用字体工具手动制作

1.在 illustrator 或 Sketch 这类矢量图形软件里创建你的 icon。
2.然后把 icon 一个一个导入到字体编辑工具，转换成 glyphs 进行编辑，设置对应的 unicode 编码。常用字体工具有：

Glyphs
FontForge
FontCreator
3.完成glyphs 编辑后，从字体工具导出 OTF 字体文件，然后利用 Font Squirrel 生成器来生成 web fonts 支持的格式。

利用在线工具自动生成

1.参照 iconfont.cn 提供的图标制作模版，在Illustrator 画布的16x16网格内，参考基线、上升部、下降部来调整图标大小和位置。

2.然后从Illustrator 保存为SVG文件，使用默认的SVG设置即可。

3.拖动一个或多个SVG图标到iconfont.cn 的上传表单，完成上传后会提示设置名称和tag，点击「完成上传」开始生成icon fonts 。生成完成后，你可以点击要下载的图标加入购物车，然后「下载至本地」。

4.解压刚下载的文件包，除了EOT、SVG、TTF、WOFF四种 web fonts 字体外，还有个 demo.html 展示所有 icons 及其对应的字体编码。

四、iconfont注意事项

1.首先是字体声明，由于各个浏览器所支持的字体文件不同，因此我们要针对浏览器的这个特点制作多种字体文件以达到兼容的目的。

2.输入的时候如何知道要输入的字符是需要输入的Icon呢，只需要通过查阅Unicode对照表，根据字体制作软件中的Unicode码进行对比即可。

3.我们制作Icon Font是为了自己之后使用的，因为一个方便管理并且使用的html组件页面是必不可少的，其中应该包括对Icon的描述、所对应的代码等等这些信息，目的就是在自己或者同事使用的时候可以很方便。

秀友百科词条内容均由网友提供，仅供参考。如发现词条内容有问题，请联系管理员。