mpvue main.js引入css,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]')

}

}