vue实现自定义字体

1、字体资源查找

网址
https://eng.m.fontke.com/
选择想要的字体之后下载
获取文件夹内的.ttf文件

2 、字体引入

在项目根目录下新建font文件夹，将ttf文件放在里面

3、相应的页面vue文件中引入

在style标签中加上

@font-face {

font-family: ‘ZCOOLXiaoWei’;//自定义字体名字
src: url(‘…/…/…/…/font/gaoduanhei.ttf’) format(‘truetype’);//定义好文件的相对地址
}

在相应的span中定义
电站运行情况

然后定义其字体family

.left-top{
justify-content: center;
display: flex;
font-family: ‘ZCOOLXiaoWei’, Arial, sans-serif;//使用自己自定义的名字
}