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;
      }

效果展示

相关推荐
夕水10 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生24 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
苹果酱056737 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
斯~内克38 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia1 小时前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby1 小时前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云1 小时前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
一千柯橘1 小时前
Nestjs 解决 request entity too large
javascript·后端