1.将字体文件放入项目中
新建一个文件夹，将字体文件放入其中
在这里插入图片描述
2.创建一个font.css文件
在ttf同级目录下创建一个font.css文件，并将字体文件的路径引入
@font-face {
font-family: 'hanbao';
src: url-loader('huawen.ttf');
font-weight: normal;
font-style: normal;
}
注意：我这里是cli生成的项目，ttf的文件配置在build/webpack.base.conf.js文件内配置过了，根据配置，这里的src我们要用url-loader引入
3.在main.js中引入
import './assets/font/font.css'
然后就可以在需要的地方使用了
例：
.main .card-box .money {
font-size: 56px;
font-weight: 600;
color: #FF4E4E;
font-family: 'hanbao';
}
如果不是cli生成的项目需要在webpack的配置文件里要加上解析.ttf文件的规则
module: {
rules: [
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
