what
定义：字体图标是一种自定义字体。
每个字都有对应的unicode，这个unicode渲染出来是一个图标(符号)的形状。
常见提供字体图标的网站：iconfont、IcoMoon、Font Awesome等等。
why
优点：
- 矢量，缩放不会模糊(针对于位图)
- 容易和css结合(设置字体，颜色，尺寸)
- 体积小
- 减少http请求
缺点：
- 制作图标麻烦
how
如何制作字体图标？
图片转字体示意图.png
- iconfont网站上传UID提供的
svg格式图标文件 - iconfont网站负责将svg格式的图标转化成webfont格式，因为兼容性的问题，不同的浏览器需要加载不同格式的字体，所以会转换成四种字体(
.tttf、.woff、.eot、.svg)。 - FED通过
@font-face设置自定义字体
最佳实践
- 和设计师约定图标格式
- 简单的通过
iconfont转换成字体，复杂的(多个图标合成的图标)通过icoMoon转换成字体 - 对字体文件进行缓存
参考
What Are Icon Fonts ?
What are the icon fonts, how do they work, how a font can be an image?
Iconfont字体生成原理及使用技巧
解密Icon Font
网友评论