mpvue 引入外部字体

要引入的字体：023-CAI978

023-CAI978.png

要引入的字体文件：023-CAI978_2.ttf
引入项目的文件：023-CAI978.css
一般放在static文件夹

image.png

023-CAI978.css 内容如下：

@font-face {
  font-family: '023-CAI978';
  src: url('023-CAI978_2.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

App.vue 引入css文件，写在 style

@import '../static/font/CAI/023-CAI978.css';

// 类名自定义
.caiNumber {
  font-family: '023-CAI978';
}

在App.vue 引入成功后，就在需要更换字体的元素加上类名 caiNumber。
有时候会没效果，把 dist 文件夹（小程序内容）删掉后，重新 npm 一次。

有的时候报错是因为你引入的文件太大了，要在 build/webpack.base.conf.js 文件修改大小限制。
找到下面这段代码，这是对字体的处理，limit 就是限制，你可以修改 limit，也可以注释这行代码。
不过还是建议修改，不要注释这行代码，有时候字体引入过大的时候报错可以提醒你压缩。

{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 这里修改限制大小
          name: utils.assetsPath('fonts/[name].[ext]')
        }
      }