vue引入外部字体

1、下载所需要的字体，.ttf格式本文以（HYLiLiangHeiJ.ttf 为例）

2、在src下新建CSS文件，文件夹中包含以下文件

3、打开font.css

这里注意两个问题： （1）URL里面必须是绝对路径； 否则： （2）如果使用使用绝对路径，必须文件上传到自己服务器的CDN 否则：

@font-face { font-family: 'HYLiLiangHeiJ'; src: url('https://img.csgo.com.cn/csgo/ef/93/ef93dac6227d93600dc14bdafb6b72241563429818.ttf')format('truetype'); font-weight: normal; font-style: normal; }

这里我使用了 CDN地址~

4、配置webpack.base.conf.js 文件

utils 是第三方库函数，需要自己定义。如果使用CDN的话，options可以直接注释掉

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

不引入utils 报错：

5.App.vue引入字体

6、可在vue文件中使用字体

7.使用字体后效果