问题描述

刚刚碰到了一个问题，移动端的Vue项目使用了Vant的组件库，但是吧，由于客户那边是内网，字体资源vant放在了阿里云的CDN上，结果就。。。好吧，来活了，目标就是把字体资源文件放在本地就完事了。

下载字体文件

字体文件参考路径参考 CDN 为了更方便大家，我直接放三个文件的地址 woff2 woff tff

字体文件存放在本地静态目录下

字体文件放入 assets/icons路径下,注意文件的命名方式

新增样式文件

在 assets/css路径中新增一个样式文件，内容为

/* vant-ui 字体处理*/

@font-face {
  font-style: normal;
  font-weight: 400;
  font-family: 'vant-icon';
  src: url(../icon/vant-icon-eeb192.woff2) format('woff2'),
    url(../icon/vant-icon-eeb192.woff) format('woff'),
    url(../icon/vant-icon-eeb192.ttf) format('truetype');
}

.van-icon {
  position: relative;
  display: inline-block;
  font: normal normal normal 14px/1 vant-icon;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.van-icon::before {
  display: inline-block;
}

入口文件导出

在main.js中导出这个新建的文件

import '@/assets/css/vant-icon.css'

问题在这已经解决了。

补充

为了在本地测试字体无法加载的情况，除了断网你还可以修改hosts文件. windows+R 输入 C:/WINDOWS/system32/drivers/etc (win10)

编辑hosts文件（推荐Vscode） 加入这一行127.0.0.1 img.yzcdn.cn 也就是把域名的ip解析到本机，自然就无法通过远程DNS解析了，哈哈哈 如果网址有变替换就是了，你就可以在不断网的情况下也能模拟字体文件无法加载的情况了！

最后，欢迎大家访问我的博客