iconfont的演进史与使用_iconfont字体格式的由来-优快云博客

从img到font库，再到iconfont和SVG图标，前端图标展示方式不断演进。iconfont提供丰富图标库，支持自定义，简化图标管理和使用。SVG图标支持多色，可动态调整样式，减少HTTP请求，提升网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端icon的演进史

img：一个页面的请求资源中图片 img 占了大部分，
image-sprite(雪碧图)：为了优化img ，就是将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标。但维护困难，修改雪碧图会使图片缓存失效。
font 库：后来渐渐地一个项目里几乎不会使用任何本地的图片了，而使用一些 font 库来实现页面图标。常见的如 Font Awesome。但定制性不好，(共675个)，丑。
iconfont ：一个阿里爸爸做的开源图库，有专门的 github issue，但人家的图标数量还是很惊人的，不仅有几百个公司的开源图标库，还有各式各样的小图标，还支持自定义创建图标库。

iconfont 三种使用姿势

unicode

最开始我们使用了unicode的格式，它主要的特点是:

优势：
- 兼容性最好，支持ie6+
- 支持按字体的方式去动态调整图标大小，颜色等等
劣势
- 不支持多色图标
- 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

使用方法：

第一步：引入自定义字体 `font-face

 @font-face {
   font-family: "iconfont";
   src: url('iconfont.eot'); /* IE9*/
   src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('iconfont.woff') format('woff'), /* chrome, firefox */
   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 }

第二步：定义使用iconfont的样式

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe604;</i>

原理也很简单，就是通过 @font-face 引入自定义字体(其实就是一个字体库).

缺点也显而易见，unicode的书写不直观，语意不明确。光看这个unicode你完全不知道它代表的是什么意思。这时候就有了 font-class。

font-class

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

使用方法:

第一步：拷贝项目下面生成的fontclass代码：

../font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

主要原理其实是和 unicode一样的，它只是多做了一步，将原先&#xe604这种写法换成了.icon-QQ，它在每个 class 的 before 属性中写了unicode,省去了人为写的麻烦。如 .icon-QQ:before { content: “\e604”; }

相对于unicode 它的修改更加的方便与直观。但也有一个大坑，之前楼主一个项目中用到了两组font-class 由于没有做好命名空间，所有的class都是放在.iconfont 命名空间下的，一上线引发了各种雪崩问题，修改了半天，所以使用font-class一定要注意命名空间的问题。

symbol

随着万恶的某某浏览器逐渐淡出历史舞台，svg-icon 使用形式慢慢成为主流和推荐的方法。相关文章可以参考张鑫旭大大的文章未来必热：SVG Sprite技术介绍

支持多色图标了，不再受单色限制。
支持像字体那样通过font-size,color来调整样式。
支持 ie9+
可利用CSS实现动画。
减少HTTP请求。
矢量，缩放不失真
可以很精细的控制SVG图标的每一部分

使用方法：

第一步：拷贝项目下面生成的symbol代码：

引入  ./iconfont.js

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

使用svg-icon的好处是我再也不用发送woff|eot|ttf| 这些很多个字体库请求了，我所有的svg都可以内联在html内。

（本文转载自下面作者）

作者：花裤衩
链接：https://juejin.im/post/59bb864b5188257e7a427c09
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。