问题
在钉钉中引入vant图标时,发现无法显示加载,PC和iOS均正常
排查思路
- 检查
vant的icon加载逻辑,发现为iconfont加载模式 - 检查其字体为
vant-icon - 检查包中字体加载逻辑,直接定位到
vant/es/icon/style/index,发现为woff2字体+base64加载模式 - 猜测可能是部分钉钉版本不支持
woff2字体导致
解决措施
直接添加woff资源引入
@font-face {
font-family: vant-icon;
src: url('//at.alicdn.com/t/c/font_2553510_ciljc7axaw7.woff?t=1705587463221') format('woff');
}
注:该资源为vant的git仓库提供,不保证其实时有效,建议下载后拉取到本地加载