阅读量:0
在使用阿里巴巴矢量图库制作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> 