vue项目中使用特殊字体的步骤

news2024/12/28 19:25:46

写在前面

在项目中使用特殊字体,需要注意,所使用的特殊字体是否被允许商用或是个人开发,以及如何使用,切记不要侵权。

首先需要在对应字体网站下载字体文件,取出里面后缀名为.ttf的文件

image-20230914154404948

然后把该文件放到src -> assets -> fonts -> 目录下,并在当前目录里新建一个fonts.css文件,把字体文件在该文件中声明

image-20230914154446205

代码片段如下:

@font-face {
  font-family: "Alimama_DongFangDaKai_Regular";
  src: url(./阿里妈妈东方大楷_Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

再然后就在main.js文件中全局声明fonts.js文件

image-20230914154538963

最后在需要使用特殊字体的地方直接引用即可
image-20230914154603156

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

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

相关文章

python自(2)切片 字典 遍历删除添加修改查询定义函数函数返回值作用域序列化异常报错urllib使用一个类型六个方法下载 视频音频图片

切片 # # 切片# s hello word# # 下标索引为0的 # print(s[0]) #h# # 左闭右开 (左是下标开始的,右是几个索引值)例如从0开始算 4个索引值 # print(s[0:4]) #hell# # 更改起始值的开始位置 # print(s[1:]) #ello word# # 下标结束位置 # p…

生成式人工智能在高等教育 IT 中的作用

作者:Jared Pane 通过将你大学的数据与公共 LLMs 和 Elasticsearch 安全集成来找到你需要的答案。 根据 2023 年 4 月 EDUCAUSE 的一项调查,83% 的受访者表示,生成式人工智能将在未来三到五年内深刻改变高等教育。 学术界很快就询问和想象生…

9月14日作业

实现myVector #include <iostream>using namespace std;template <typename T> class myVector { private:T* data;int size;int capacity; public:// 构造函数myVector() : data(nullptr), size(0), capacity(0) {}//拷贝构造函数myVector(const myVector& o…

Jetson Xavier NX开发板无屏幕远程连接

设备&#xff1a; jetson nx &#xff08;ubuntu20.04&#xff09;,win10 目标&#xff1a;实现jetson nx不连接屏幕实现远程连接并控制 网上比较多的答案都是使用vnc,但本人亲尝试过了vnc只有在jetson nx开发板连接有屏幕时候才有空&#xff0c;一旦不连接屏幕&#xff0c;…

千兆以太网网络层 ARP 协议的原理与 FPGA 实现

文章目录 前言一、ARP 帧的应用场景和存在目的二、ARP 帧工作原理三、以太网 ARP 帧发包实例设计四、以太网 CRC校验代码五、以太网 ARP 帧发包测试---GMII1.模拟数据发送2.仿真模块3.仿真波形六、以太网 ARP 帧发包测试---RGMII1.顶层文件2 .仿真代码七、上板测试(RGMII)前言…

浅显易懂理解傅里叶变换

说起电子硬件专业&#xff0c;那不得不提的就是傅里叶变换了。 大学课程中应该吓倒了很多人&#xff0c;谈傅里叶色变了。 本次就来重新认识一下电子硬件中的傅里叶变化。 首先理解之前&#xff0c;当然是需要先知道傅里叶这位大牛的人物百科啦。 傅里叶是法国数学家&#xff0…

【数据结构】平衡二叉搜索树(AVL树)——AVL树的概念和介绍、AVL树的简单实现、AVL树的增删查改

文章目录 平衡二叉搜索树&#xff08;AVL树&#xff09;1.AVL树的概念和介绍2.AVL树的简单实现2.1AVL树的插入2.2AVL树的旋转2.2.1左旋2.2.2右旋2.2.3右左双旋2.2.4左右双旋 全部源码 平衡二叉搜索树&#xff08;AVL树&#xff09; 为什么要引入平衡二叉搜索树&#xff1f; 在之…

jdk 中的 keytool 的使用,以及提取 jks 文件中的公钥和私钥

这里暂时只需要知道如何使用就可以了。 首先是生成一个密钥&#xff0c; keytool -genkeypair -alias fanyfull -keypass ffkp123456 -validity 365 -storepass ffsp123456 -keystore fanyfull.jks -keyalg RSA解释一下这里的选项&#xff0c; -alias 密钥对的名称-keypass …

等变性的AI:从离散到连续

这篇文章主要介绍了在科学问题中如何实现不变性或等变性&#xff0c;其中介绍了实现等变性的数学和物理基础&#xff0c;包括离散和连续对称变换的示例&#xff0c;并描述了在实践中如何使用张量积。文章还讨论了如何处理数据中的对称性&#xff0c;以及如何开发适应对称性约束…

喜报!Coremail荣获广东省信息技术应用创新优秀产品和解决方案

导语 近日&#xff0c;由广东省信息技术应用创新产业联盟组织的“2023 年广东省信息技术应用创新成果交流会”在广州顺利召开。 Coremail作为会员单位受邀出席此次交流会。会上&#xff0c;Coremail荣获优秀产品和解决方案奖项&#xff0c;CACTER邮件安全网关获评“2022年广东…

阿里云服务器操作系统怎么选择?阿里云镜像区别

阿里云服务器操作系统怎么选择&#xff1f;小白镜像选择攻略&#xff01;阿里云服务器镜像怎么选择&#xff1f;云服务器操作系统镜像分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022数据中心版64位中文…

想了解商品期权开户门槛?零门槛开户,不用担心!

商品期权不是零门槛开户&#xff0c;不过可以通过第三方期权分仓软件实现0门槛参与商品期权&#xff0c;股指期权&#xff0c;上证50ETF期权、沪深300ETF期权和创业板ETF期权交易&#xff0c;下文介绍想了解商品期权开户门槛&#xff1f;零门槛开户&#xff0c;不用担心&#x…

【Seata】04 - Seata TCC 模式 Demo 调用流程分析

文章目录 前言参考目录版本说明前置知识1、TCC 模式预留资源2、TCC 模式可能会出现的问题2.1、幂等性问题2.2、空回滚问题2.3、悬挂问题 测试 Demo1、数据库表结构2、模块说明3、调用逻辑说明4、分析流程说明 Seata TCC 模式 Commit 调用流程1、调用流程图2、TCC 动作拦截器&am…

【华为云云耀云服务器L实例评测|使用教学】一文带你快速入手华为云云耀云服务器L实例

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

DC/DC开关电源学习笔记(七)低压大电流DC/DC变换技术

低压大电流DC/DC变换技术 1. 无暂态要求的低压大电流DC/DC变换技术2. 负载极其快速变化的低压大电流DC/DC变换技术2.1 非隔离型 VRM2.2 隔离型VRM低压大电流高功率 DC/DC 变换技术,已从前些年的 3.3V 降至现在的 1.0V 左右,电流目前已可达到几十安至几百安。同时,电源的输出指标…

使用CFimagehost源码搭建免费的PHP图片托管私人图床,无需数据库支持

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

vue3+scss开启写轮眼

vue3scss开启写轮眼 一、相关技术二、使用步骤1.安装依赖2.眼球3 勾玉4 旋转动画5 综合 一、相关技术 采用vue3vitescss的技术内容进行开发 二、使用步骤 1.安装依赖 代码如下&#xff1a; npm install sass2.眼球 首先我们根据需要 将眼睛的基础形状描绘出来&#xff0c…

【AI+医疗】AI在医疗影像设备工作周期中的应用探索

导读 随着人工智能技术的飞速发展&#xff0c;越来越多的领域开始与人工智能技术深度融合&#xff0c;产生了一种新型的技术模式——AI。AI是指将人工智能技术与其他领域的技术或应用进行结合&#xff0c;在提高效率、精度和创新能力的同时&#xff0c;也为人工智能技术的发展提…

The Sandbox 和 Burrito 钱包达成合作!

我们很高兴宣布与 Burrito 钱包达成合作&#xff0c;这是韩国领先的区块链公司 Rotonda 推出的一款全新的 Web3 钱包。此次合作旨在丰富 The Sandbox 平台的用户体验&#xff0c;实现更无缝的资产管理和转移。 此次合作的主要优势之一是将 Burrito 钱包集成到 The Sandbox 生态…

功率放大器的作用有哪些

功率放大器是电子设备中常见的一个组件&#xff0c;其作用是将输入信号的能量放大到更高的功率级别&#xff0c;以用于驱动高功率负载或者提供足够的功率来满足特定需求。功率放大器在各种应用领域中发挥着重要作用&#xff0c;下面将详细介绍功率放大器的作用与应用。 图&…