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

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

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

转ttf的网址：/zb_users/upload/2024/csdn/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的网址/zb_users/upload/2024/csdn/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>