图标字体 Icon Font

CSS Sprite的缺陷

  • 制作过程比较麻烦
  • 基于栅格图形，难以进行响应式设计，如支持平滑缩放、自由着色等

解决方案: icon font

  • 利用字体工具将图形图标（icons）转换成 web fonts，形成 icon fonts 库
  • 借助 CSS3 的 @font-face 指令将该资产引入页面
  • 字体是矢量化图形，它天生具有「分辨率无关」的特性，即在任何分辨率和PPI下面，都可以做到完美缩放，不同于传统位图(png/jpeg等)，逻辑放大后有锯齿或模糊现象

icon font 库： font awesome

定制 icon font 库

使用第三方Icon font的好处在于可以共享他人的设计成果,但假如只需要引用少量图标,而因此引入整个图标字体则浪费带宽

前端社区提供了各种在线工具,允许定制专有的icon font库(及配套的字体文件、css代码)

参考阅读

图标库

当前较为成熟的图标库，不但支持font的打包格式，还提供npm包等形式，方便各种前端框架导入 比如： https://tabler-icons.io/

更多图标库

results matching ""

    No results matching ""