在web端，阿里的iconfont图标库提供了三种引入图标的方式
 
1.Unicode
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      @font-face {
      font-family: "iconfont"; 
      src: url(\'//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff2?t=1621078803946\') format(\'woff2\'),
          url(\'//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff?t=1621078803946\') format(\'woff\'),
          url(\'//at.alicdn.com/t/font_2549818_g15zrk8wmwb.ttf?t=1621078803946\') format(\'truetype\');
    }
    .iconfont {
      font-family: \'iconfont\';
    }
  </style>
</head>
<body>
  <div class="iconfont"></div>
</body>
</html>
浏览器中显示如下

 

字体文件其实就是一个以unicode作为索引的字形表。
html中其中&表示转义，#x可以用于表示16进制转义字符。
 
那么如何才能知道我们字体文件中每个字形对应的是哪个unicode码呢?可以从下载的地方看到我们想下载的iconfont对应的unicode码
 
 
 
 
2.Font class
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2549818_g15zrk8wmwb.css">
  <style>
  </style>
</head>
<body>
  <div class="iconfont icon-you-tube"></div>
  <div class="iconfont icon-whats-app"></div>
  <div class="iconfont icon-twiter"></div>
</body>
</html>
浏览器中显示

 

 
引进来的css文件内容如下：
@font-face {
  font-family: "iconfont"; /* Project id 2549818 */
  src: url(\'//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff2?t=1621078803946\') format(\'woff2\'),
       url(\'//at.alicdn.com/t/font_2549818_g15zrk8wmwb.woff?t=1621078803946\') format(\'woff\'),
       url(\'//at.alicdn.com/t/font_2549818_g15zrk8wmwb.ttf?t=1621078803946\') format(\'truetype\');
}

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

.icon-you-tube:before {
  content: "\e6c9";
}

.icon-whats-app:before {
  content: "\e6ee";
}

.icon-twiter:before {
  content: "\e603";
}
可以看出，这种引入方式和原理与第一种类似，只是在dom上增加了伪元素，css中正斜杠\表示一个16进制数字。这样的好处是我们不用自己写unicode码，只需添加上相应的类名就行

类名的获取也是在下载的地方

 

 

3.Symbol
　　官网介绍
　　这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  • 兼容性较差，支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般，还不如png。
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> 
  <style>
    .icon {
      /* 通用的css代码（引入一次就行） */
      width: 1em;
      height: 1em;
    }
    .my-class {
        /* 可以通过使用font-size进行设置图标大小 */
      font-size: 500px;
    }
  </style>
</head>
<body>
  <svg class="icon my-class" aria-hidden="true">
    <use xlink:href="#icon-1_jifenduihuan-02"></use>
  </svg>
  <script src="https://at.alicdn.com/t/font_2549818_s5mzw8ufe9t.js"></script>
</body>
</html>
浏览器显示如下

 

svg的大小不是不支持font-size修改的吗？如何实现的呢？其实这里用了一个比较hack的方式，就是把图标元素的宽高都写为1em，而em的大小是相对于该元素的字体大小（前面文章中有详细叙述）的，这样就实现了svg宽高跟着svg的字体大小一起变了。

 

总结
Unicode和Font class本质都是使用系统的字体渲染引擎，优点就是兼容性好，缺点就是只支持单色图标
Symbol是使用svg，支持多色，缺点就是兼容性稍差，支持ie9+，现代浏览器

版权声明：本文为wanqiblog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wanqiblog/p/14774220.html