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

芒果沙冰哟

于 2024-08-16 14:18:10 发布

阅读量329

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_61476911/article/details/141258274

版权

需求:关于一些样式需要自定义的,所以需要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;
}