Icon Fonts(字体图标)的探究

what

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

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

常见提供字体图标的网站:iconfontIcoMoonFont 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

推荐阅读更多精彩内容