vant icon在内网使用问题处理

Posted 2021-10-11 littleWang

vant icon在内网时使用问题

Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置 url-loader。
但是当在内网使用时会出现vant的字体请求不到的问题：
这时vant官网给出解决方案为
main.js中的引入css

import \'vant/lib/icon/local.css\';

Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。
但是在有些内网环境的确会出现无法加载woff2的情况

但是在测试时有些情况下还是无法出现正常加载字体，所以采用将网络下载的字体下载下来
tff等

@font-face {
    font-family: \'vant-icon\',
    url: loder(vant-icon) url(本地加载的地址.tff),
    url: loder(vant-icon) url(本地加载的地址.woff),
    url: loder(vant-icon) url(本地加载的地址.woff2)
}

将如上的方式引入之后就可以解决在某些环境vanticon无法使用的问题。