vue 中引入pingfang字体 或者其他字体 支持ttf otf格式

 

 新建一个font 文件 里面放字体文件 可以百度搜索你想要的字体下载下来 一般10m左右

新建一个font.css 里面配置字体

@font-face {

    font-family: 'PF';

    src: url('mud.TTF');

    font-weight: normal;

    font-style: normal;

  }

然后在需要使用的文件中导入该css 

 

 我是在app.vue 全局导入 设置font-family：PF

在vue 脚手架4.0以上 需要在config.js 配置

//ttf字体解析

    rules: [

        {

            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

            loader: 'url-loader',

            options: {

                limit: 10000,

                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

            }

        }

    ]