vue中引入自定义字体文件

【项目需求】

在后台需要显示设计稿给定的如下图的字体样式

【实现过程】

第一步：首先将设计稿的字体文件ttf或者其他文件的格式引入到项目的assets文件夹目录下，可以新建一个fonts文件夹里面放文件和css，如下图

需要注意的是fonts文件夹下的css必须和字体文件放在同一目录文件夹下，使用@font-size引用本地字体文件

@font-face {
    font-family: 'LcdD';
    src: url('wewe.TTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

第二步：在main.js文件里面添加引入样式的代码，如下图

【页面使用】

在页面中想要设定自定义字体的标签添加style样式，就可以了

.style{
   font-family: 'LcdD'
}