css引入外部字体

1、修改build文件夹下 webpack.base.conf.js 在 rules 中添加以下代码

修改过后别忘了重启项目哦！！！！！

{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)
}
}

2、新建 font 文件夹 ，引入外部字体资源，创建 font.css

font文件夹

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201217114512836.png)
font.css （url中路径就这么写，绝对路径不生效，原因暂时没懂！）
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201217114533374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzg4MTA3,size_16,color_FFFFFF,t_70)
上述代码

@font-face {
font-family: NotoSansHansRegular;
src: url(‘NotoSansHans-Regular.otf’);
font-weight: normal;
font-style: normal;
}

3、在App.vue中引入font.css（全局引入）

4、组件中使用

5、大功告成