1. 下载字体包
2. 将字体包放在资源目录src/assets/font下
3. 创建字体css文件夹src/assets/fontcss, 创建字体css文件并引入字体包
/* 注意：font-family: 'XXX'; 将字体名字自定义为 XXX,使用时要用这个名字*/
@font-face {
font-family: 'myFont';
src: url('../font/Noto Sans SC Regular.ttf');
}
4. 在项目的 src\main.js 文件中引入写好的字体css文件
import '@/assets/fontcss/Noto-Sans-SC-Regular.css'
5. 在组件或者全局添加字体样式
组件添加不再赘述。全局添加, 在 src\App.vue 文件中设置css样式
* {
font-family: myFont;
}
设置字体样式前后效果展示:
