vue项目引入比较独特的字体的方法

引入字体的步骤

前言

公司这边开发一个可视化大屏,UI小姐姐设置了很多比较个性的字体,直接在代码中写入字体名称,字体并没有发生变化,感觉很奇怪,最后上网查资料得知,有些字体需要引入相应的文件才能正确显示

(步骤一)引入的文件

OPPOSans-M.ttf,TencentSans-W3.ttf,TencentSans-W7.ttf,YouSheBiaoTiHei.ttf

(步骤二)font.css

javascript 复制代码
//font.css
@font-face {
    font-family: 'TencentSans';
    src: url(./TencentSans-W7.ttf);
}

@font-face {
    font-family: 'TencentSans-W3';
    src: url(./TencentSans-W3.ttf);
}

@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url(./YouSheBiaoTiHei.ttf);
}
@font-face {
    font-family: 'OPPOSans';
    src: url(./OPPOSans-M.ttf);
}

(步骤三) 全局引入

javascript 复制代码
//main.js
import './assets/font/font.css'

在使用的地方的展示

javascript 复制代码
 .header {
      font-family: YouSheBiaoTiHei;
      font-size: 40px;
      }

效果展示

相关推荐
燃先生._.35 分钟前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖2 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235242 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240252 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar2 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人3 小时前
前端知识补充—CSS
前端·css
GISer_Jing3 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245523 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v4 小时前
webpack最基础的配置
前端·webpack·node.js