Icon Fonts(字体图标)的探究

what

定义：字体图标是一种自定义字体。

每个字都有对应的unicode，这个unicode渲染出来是一个图标(符号)的形状。

常见提供字体图标的网站：iconfont、IcoMoon、Font Awesome等等。

why

优点：

• 矢量，缩放不会模糊(针对于位图)
• 容易和css结合(设置字体，颜色，尺寸)
• 体积小
• 减少http请求

缺点：

• 制作图标麻烦

how

如何制作字体图标？

图片转字体示意图.png

1. iconfont网站上传UID提供的svg格式图标文件
2. iconfont网站负责将svg格式的图标转化成webfont格式，因为兼容性的问题，不同的浏览器需要加载不同格式的字体，所以会转换成四种字体(.tttf、.woff、.eot、.svg)。
3. FED通过@font-face设置自定义字体

最佳实践

1. 和设计师约定图标格式
2. 简单的通过iconfont转换成字体，复杂的(多个图标合成的图标)通过icoMoon转换成字体
3. 对字体文件进行缓存

参考

What Are Icon Fonts ?
What are the icon fonts, how do they work, how a font can be an image?
Iconfont字体生成原理及使用技巧
解密Icon Font