vue项目引入字体样式

news2024/11/29 8:53:42

1、先下载好需要的字体样式,下载好的应该是个.ttf文件
在这里插入图片描述

2、在asset中创建fonts文件夹,将字体样式文件放进去,然后再到里面创建font.css文件
3、font.css文件里面进行引用

@font-face {
  /* 重命名字体名 */
  font-family: 'HeFengShuDaoZhaoHe';
  /* 引入字体 */
  src: url('./HeFengShuDaoZhaoHe.ttf');
  font-weight: normal;
  font-style: normal;
}

4、接下来就是看你自己是要局部引入还是全局引入了,我是在全局引入的,也就是main.js文件引入

import '@/assets/fonts/font.css'

5、字体样式使用

.title {
   font-family : 'HeFengShuDaoZhaoHe';  // 这里是使用
   font-size: 24px;
   text-align: center;
   margin: 30px 0 0 30px;
}

6、我下载字体样式的地方:跳转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/470537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

无惧黑暗强光,纯视觉导航也能全天候作业

对于一台激光导航扫地机器人而言,全天候作业并非难事,那么纯视觉导航扫地机器人能做到吗? 无论对于人,还是机器人,光线环境的变化对“眼睛”的影响都是致命的。由于视觉传感器对于光线十分敏感,在家庭场景…

TDA4VM/VH 芯片 NAVSS0

请从官网下载 TD4VM 技术参考手册,地址如下: TDA4VM 技术参考手册地址 概述 (NAVSS0 的介绍在 TRM 的第10.2章节) NAVSS0 可以看作 MAIN 域的一个复杂外设域,实现如下功能: UDMASS: DMA 管理子系统;MODSS&#xf…

【GPT】你需要了解的 ChatGPT的技术原理- Transformer架构及NLP技术演进

目录 概述 The Concept of Transformers and Training A Transformers ModelTransformers 的概念和训练 Transformers 模型

2023年第二十届五一数学建模竞赛赛题浅析

我们带来五一赛题的一个c题解析这个的目的,就是为了帮助大家更好的选题,简单的看一下这个几个题目就可以。然后我们题目给出的这个文件夹就是包括三个赛题,还有我们各个赛题的论文规范模板,这三个我们论文写作的时候才会用到。主要…

【某区护网】从外网打点到拿下集团域控

目录 web打点 反弹shell与权限维持 主机信息收集与反向代理 攻击域控 最后 前端时间刚结束了攻防演练活动,其中一项成果为拿下某集团域控制器权限,直接控制域内主机5000多台。以下为攻击过程的粗略记录,整体来说还是比较容易。 web打点…

常见HTTP攻击赏析(3)

基于OpenAPI的APIcat开源日志监控软件已经开发一段时间了,在自己的网站上抓到了一些HTTP的攻击,没事,我们就汇总给大家做个赏析,也当是个提醒。 这是一篇系列文章,数据反馈,看的人还是不少的,感…

Java知识学习13(AQS详解)

1、AQS介绍? AQS 的全称为 AbstractQueuedSynchronizer ,翻译过来的意思就是抽象队列同步器。这个类在 java.util.concurrent.locks 包下面。 AQS 就是一个抽象类,主要用来构建锁和同步器。 public abstract class AbstractQueuedSynchron…

Java学习17(IO模型详解)

1、何为IO? I/O(Input/Outpu) 即输入/输出 。 从计算机结构的角度来解读一下 I/O。 根据冯.诺依曼结构,计算机结构分为 5 大部分:运算器、控制器、存储器、输入设备、输出设备。 输入设备(比如键盘&am…

规模增长背后抖音如何构建直播体验优化

随着抖音直播用户持续增加,生态日渐丰富,在经历亿万规模化增长的过程之中,体验优化是必须要面对的问题,如何建立不同阶段的优化体系?如何抓住过程中的优化重点?另外面对业务增长诉求,面对新技术…

计算机网络学习08(TCP三次握手和四次挥手)

1、建立连接—TCP上次握手 建立一个 TCP 连接需要“三次握手”,缺一不可 : 一次握手: 客户端发送带有 SYN(SEQx) 标志的数据包 -> 服务端,然后客户端进入 SYN_SEND 状态,等待服务器的确认;二…

《PyTorch 深度学习实践》第13讲 循环神经网络(高级篇)

文章目录 1 这一讲任务2 相关解释3 代码 该专栏内容为对该视频的学习记录:【《PyTorch深度学习实践》完结合集】 专栏的全部代码、数据集和课件全放在个人GitHub了,欢迎自取。 1 这一讲任务 根据名字中的字符来预测其是哪个语言地区:如&quo…

03_线程间通信

面试题:两个线程打印 两个线程,一个线程打印1-52,另一个打印字母A-Z打印顺序为12A34B...5152Z,要求用线程间通信 public class Demo01 {public static void main(String[] args) {ShareData05 shareData05 new ShareData05();new…

DFIG控制11: 磁链定向矢量控制和仿真

DFIG控制11: 磁链定向矢量控制和仿真,主要是看下怎么根据DFIG模型来做矢量控制。 磁链定向和模型简化 原模型 dq同步坐标系下的模型:DFIG控制10: 双馈发电机的动态模型_Fantasy237的博客 电压方程: { u s d R s i…

AIhelp智能问答

前言 2023年,科技圈里,持续爆火的科技应用,毫无疑问是生成式AI,chatGPT了的,之所以令人惊叹,正是因为它的强大 可以这么认为,chatGPT能够解决很多问题,尤其是问答,问题答案的搜索,远比百度,google要精准,方便得多 如何提出高质量的问题,写好一个promot提示词,尤为重要,提出问题…

Anaconda+vscode+pytorch环境搭建

1、安装Anaconda ​ 不要添加到path,否则可能会引起其他冲突。 ​ 记得手动添加环境变量 2、安装vscode 已经不支持自定义安装啦,默认(D:\Program Files) 按住ctrlshiftp,输入language,选择第一个configure Display Language&…

TypeScript第一个程序HelloWorld

博主作品:《Java项目案例》主要基于SpringBootMyBatis/MyBatis-plusMySQLVue等前后端分离项目,可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程,企业实战开发。《微服务实战》专栏是本人的实战经验总结,…

新晋项目经理,如何快速胜任?

第一次当项目经理,往往会由于经验不足、项目管理知识的不足以及角色转换等原因,无从着手。 有时候我们会觉得一个项目经理,不像项目经理,那像什么呢?当然是像程序员。也就是说,他的职位虽然变化了&#x…

【MATLAB图像处理实用案例详解(16)】——利用概念神经网络实现手写体数字识别

目录 一、问题描述二、概念神经网络实现手写体数字识别原理三、算法步骤3.1 数据输入3.2 特征提取3.3 模型训练3.4 测试 四、运行结果 一、问题描述 手写体数字属于光学字符识别(Optical Character Recognition,OCR)的范畴,但分类…

07 【Sass语法介绍-控制指令】

1.前言 Sass 为我们提供了很多控制指令,使得我们可以更高效的来控制样式的输出,或者在函数中进行逻辑控制。本节内容我们就来讲解什么是 Sass 控制指令?它能用来做什么?它将使你更方便的编写 Sass 。 2.什么是 Sass 控制指令 控…

松下 OPF CMOS影像传感器

一、概述 不久前,松下在其国际网站公布了关于有机光电导膜(OPF)CMOS影像传感器技术的最新研发进展,并表示该技术已趋于成熟,有望在未来一段时间内正式投入商用。此外,松下还在3月15日至16日,于…