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

ops/2024/11/15 7:28:32/

引入字体的步骤

  • 前言
    • (步骤一)引入的文件
      • `OPPOSans-M.ttf,TencentSans-W3.ttf,TencentSans-W7.ttf,YouSheBiaoTiHei.ttf`
    • (步骤二)font.css
    • (步骤三) 全局引入
    • 在使用的地方的展示
    • 效果展示

前言

公司这边开发一个可视化大屏,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;}

效果展示

在这里插入图片描述


http://www.ppmy.cn/ops/113717.html

相关文章

pg入门2—pg中的database和schema有什么区别

在 PostgreSQL(简称 PG)和 MySQL 中,Database 和 Schema 是两个不同层次的概念,而在 MySQL 中,Database 和 Schema 常常被混用。通过结合这两种数据库的设计,我们可以更清晰地理解它们之间的区别。 1. Pos…

Python--数据格式转换

在 Python 中,数据格式转换是非常常见的任务。我们可以使用内置的模块如 json 或者 pandas 来进行格式转换。你提到的 .jsonl 文件(JSON Lines)是每一行都是一个 JSON 对象的文件格式,而 .json 是标准的 JSON 文件格式。 任务目标…

管道焊缝质量数据集——good和bad两种标签,0为good.1134个图片,有对应的xml标签和txt标签,可用于yolo训练

管道焊缝质量的数据集 有good和bad两种标签,0为good. 1134个图片,有对应的xml标签和txt标签,可用于yolo训练,赠送五个常用的训练脚本。 管道焊缝质量检测数据集 管道焊缝质量检测数据集 项目背景: 管道焊接是工业生…

灵当CRM系统index.php存在SQL注入漏洞

文章目录 免责申明漏洞描述搜索语法漏洞复现nuclei修复建议 免责申明 本文章仅供学习与交流,请勿用于非法用途,均由使用者本人负责,文章作者不为此承担任何责任 漏洞描述 灵当CRM系统是一款功能全面、易于使用的客户关系管理(C…

系统架构设计师 云原生架构篇

🌥️ 云原生架构 🧐 什么是云原生 云原生是一种构建和运行应用程序的方法,充分利用云计算的优势,包括可扩展性、高可用性和敏捷性。 云原生架构强调应用与云环境的紧密结合,通过自动化部署、弹性伸缩、分布式处理和…

OpenCV库学习之NMSBoxes函数

OpenCV库学习之NMSBoxes函数 一、简介 cv2.dnn.NMSBoxes 是 OpenCV 库中的一个函数,用于在目标检测任务中执行非极大值抑制(Non-Maximum Suppression, NMS)。这个函数通过移除多余的边界框来保留最佳的检测结果。在目标检测算法(…

YOLOv8改进系列,YOLOv8替换主干网络为PP-HGNetV2(百度飞桨视觉团队自研,助力涨点)

摘要 PP-HGNetV2(High Performance GPU Network V2) 是百度飞桨视觉团队自研的 PP-HGNet 的下一代版本,其在 PP-HGNet 的基础上,做了进一步优化和改进,最终在 NVIDIA GPU 设备上,将 “Accuracy-Latency Balance” 做到了极致,精度大幅超过了其他同样推理速度的模型。其在…

flutter遇到问题及解决方案

目录 1、easy_refresh相关问题 2、 父子作用域关联问题 3. 刘海屏底部安全距离 4. 了解保证金弹窗 iOS端闪退 (待优化) 5. loading无法消失 6. dialog蒙版问题 7. 倒计时优化 8. scrollController.offset报错 9. 断点不走 10.我的出价报红 11…