在很多项目中我们会使用到UI给我们的特定字体,那我们在项目中如何使用呢?
第一步:
在src目录下创建一个assets文件夹用于存放我们的一些样式文件,然后再当前目录下再创建一个fonts文件夹用于存放UI给的字体包:如下所示
第二步:
也是在assets目录下创建style目录,在创建一个名为public的css文件,引入我们的字体包,具体如下:
// 使用 font-face 引入我们的字体包
@font-face {
// 自定义字体包的名字
font-family: 'DINAlxxx-Bold';
// 引入路径
src: url("../fonts/DIN-BoldAlternate.otf");
}
// 如果有多个就如上所示继续引入
最后:
在man.js中引入刚刚写好的public.css,具体如下:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
// 引入刚刚写好的字体包css
import '@/assets/style/public.css'
最后我们在vue页面中进行使用,具体如下:
.main_tips {
font-size: 14px;
// 使用我们自定义的字体包
font-family: DINAlxxx-Bold;
font-weight: 400;
color: #ffffff;
}