vue项目中引入字体文件样式

需求:关于一些样式需要自定义的,所以需要ui提供字体文件,然后引入项目中,就可实现自定义

首先看一下实现效果图:

第一步:新建一个字体样式文件用于放字体文件和css样式 

 

font.css文件:

/* 数字特殊字体 */
@font-face {/*给字体命名*/font-family: 'DINCondBold';/*引入字体文件*/src: url('./DINCond-Bold.otf');font-weight: normal;font-style: normal;
}/* 时间特殊字体 */
@font-face {/*给字体命名*/font-family: 'DigitalBold';/*引入字体文件*/src: url('./DS-Digital Bold.ttf');font-weight: normal;font-style: normal;
}

第二步:在main.js里面引入

第三步:页面使用