解决uniapp使用阿里巴巴矢量图库，在移动端不显示的问题

在使用阿里巴巴矢量图库制作icon字体图标时，发现H5端能正常显示，而运行在手机上却不显示图标，找了好几个办法终于发现了原因：

• 在ttf字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；大于则需要自己转好文件为base64使用
• 使用方法如下：
• 1.将阿里巴巴图库icon下载至本地，得到iconfont.css和iconfont.ttf两个文件；将iconfont.css放入static下自己新建的font文件夹
• 2.将iconfont.ttf文件转成base64

转ttf的网址：https://www.giftofspeed.com/base64-encoder/

• 3.将得到的base64放入iconfont.css 中并修改成如下，仅需要改src部分，不要全照搬！！！

@font-face {
  font-family: "iconfont"; /* Project id 4572225 */
  /* src: url('./static/font/iconfont.ttf') format('truetype'); 方法一不显示
 	url('https//at.alicdn.com/t/c/font_4572225_rsnmkumllk.ttf?t=1722246508943') format('truetype');方法二，可行，
 	但是阿里巴巴图库提示【在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用
 	并做好备份】；所以不推荐
 */
  src:
  /* 不显示原因：在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；大于需要自己转好文件使用 */
   /* 如果使用小于40kb还是不显示，全局引用的iconfont.css可能与阿里巴巴矢量图库的CSS文件中一些全局定义的样式，
   导致组件或页面之间相互干扰，使用转base64也能解决该问题 */
  /* 方法三：.ttf文件转化为 base64 格式，转ttf的网址https://www.giftofspeed.com/base64-encoder/ */
  url('data:font/truetype;charset=utf-8;base64,得到的base64编码') format('truetype');
}

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

.icon-weixin:before {
  content: "\e6ea";
  font-size: 20px;
  margin:0 10rpx;
  color: #4cbf00;
}

• 4.在App.vue页面导入全局使用

<style lang="scss">
/*每个页面公共css */
@import "@/static/font/iconfont.css";
page {
  height: 100%;
}
</style>

• 5.在需要的页面使用图标

 <view class="iconfont icon-weixin"></view>