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.使用字体后效果