vue引入自定义字体并使用

news2024/10/7 10:16:49

结构

在这里插入图片描述

font.scss引入字体

@charset "UTF-8";

@font-face{
  font-family: "caoshu";
  src: url("caoshu.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "Xingkai";
  src: url("XingKai.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "XingShu";
  src: url("XingShu.ttf");
  font-weight: normal;
  font-style: normal;
}

main.js 引入font.scss

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

使用

    .textContent {
      margin-top: 0%;
      font-family: XingShu;
    }

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

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

相关文章

leetcode 144.二叉树的前序遍历 145.二叉树的后序遍历 94.二叉树的中序遍历

⭐️ 题目描述 🌟 链接1:leetcode 144.二叉树的前序遍历 🌟 链接2:leetcode 145.二叉树的后序遍历 🌟 链接3:leetcode 94.二叉树的中序遍历 思路: leetcode的遍历和普通的遍历还略有一些不同&a…

【Spring篇】初识 Spring IoC 与 DI

目录 一. Spring 是什么 ? 二. 何为 IoC ? 三. 如何理解 Spring IoC ? 四. IoC 与 DI 五 . 总结 一. Spring 是什么 ? 我们通常所说的 Spring 指的是 Spring Framework(Spring 框架),它是⼀个开源框架,有着活跃⽽ 庞⼤…

SAP 执行失败JOB及dump日志监控

背景 系统使用时间较长,存在大量的后台作业,用户量较大,需要及时监控后台作业状况及系统dump情况,以便及时处理。 功能 1. 查询屏幕填写日期前n秒状态为错误及未知的后台作业 2. 查询屏幕填写日期前n秒系统中的dump记录--客制化程…

有关动态内存管理的笔试题

题目一: void GetMemory(char* p) {p (char*)malloc(100); }void test(void) {char* str NULL;GetMemory(str);strcpy(str, "hello world");printf(str); }int main() {test();return 0; } 请问上述代码输出结果是什么,理由是什么&#xf…

leetcode 90. 子集 II

2023.7.23 这道题是上一题子集的升级版&#xff0c;即数组nums包含了相同的元素&#xff0c;这时候需要对集合之间进行去重&#xff0c;可以参考这一题组合总和II的去重方法。 下面直接上代码&#xff1a; class Solution { public:vector<vector<int>> ans;vecto…

Qt QToolBar 添加 换行 添加到底部 左侧 右侧

1. 常用添加&#xff1a; #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);QToolBar *toolBar addToolBar(t…

查找和二叉树(基础知识和基本操作)

查找&#xff1a; 1.二分查找&#xff1a;先定一个大范围&#xff0c;想一个数&#xff0c;看是在起始范围到中间范围还是中间范围到结束范围&#xff0c;依次循环直到确定值&#xff08;相当于一直把范围折半&#xff0c;直到找到&#xff09; while(low<high) {int mid(…

一元多项式的表示及相加

实现思路&#xff1a; 通过链表实现&#xff0c;会更为简单直观。用链表中的每个结点表示多项式中的每一项&#xff0c;多项式每一项都是由数据域&#xff08;包含系数和指数&#xff09;和指针域构成的&#xff0c;所以在定义表示结点的结构体时&#xff0c;可如下所示进行定义…

【Ansible 自动化配置管理实践】01、Ansible 快速入门

目录 一、Ansible 快速入门 1.1 什么是 Ansible ​1.2 Ansible 主要功能 1.3 Ansible 的特点 1.4 Ansible 基础架构 二、Ansible 安装与配置 2.1 Ansible 安装 2.2 确认安装 三、Ansible 配置解读 3.1 Ansible 配置路径 3.2 Ansible 主配置文件 3.3 Ansi…

PHP后台登录功能单账号登录限制

PHP后台登录功能单账号登录限制 单账号登陆是什么第一步创建数据表第二步创建登录页面test2.html第三步创建登录提交test2.php第四步访问后台首页第五步演示 单账号登陆是什么 一个用户只能登录一个账号通常被称为单账号登录限制或单用户单账号限制。这意味着每个用户只能使用…

TCP通信 -- 接收并反馈(全)

TCP通信整体过程&#xff1a; 1.【服务端】启动,创建ServerSocket对象&#xff0c;等待连接。2.【客户端】启动,创建Socket对象&#xff0c;请求连接。3.【服务端】接收连接,调用accept方法&#xff0c;并返回一个Socket对象。4.【客户端】Socket对象&#xff0c;获取OutputStr…

JVM之内存与垃圾回收篇3

文章目录 8 垃圾回收8.1 基本理论8.1.1 对象的finalization机制8.1.2 理解System.gc8.1.3 内存溢出和内存泄漏8.1.4 Stop The World8.1.5 安全点和安全区域8.1.6 Java中的引用 8.2 垃圾回收算法8.2.1 引用计数法8.2.2 可达性分析8.2.2.1 使用MAT查看GC Roots8.2.2.2 使用JProfi…

【docker,typeorm】docker时区与本地时区的不同步【已解决】

前言 我使用账号登陆vuecms.cn网站&#xff0c;查看登陆日志&#xff0c;发现所有时间全部少8个小时。懵逼树上懵逼果&#xff0c;懵逼树下你和我… 我的开源网站后端是基于nestjs&#xff0c;数据库使用typeorm进行连接操作 原因分析&#xff1a; 原因一: docker环境与本地环…

结构型设计模式之适配器模式【设计模式系列】

系列文章目录 C技能系列 Linux通信架构系列 C高性能优化编程系列 深入理解软件架构设计系列 高级C并发线程编程 设计模式系列 期待你的关注哦&#xff01;&#xff01;&#xff01; 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everythi…

Type [unknown] not present(主要问题是jar冲突)

解决方案&#xff1a;1选择pom.xml 2鼠标移动到打开的pom.xml点击右键选择maven 显示图 3ctrl鼠标左键移动找到红线 可以看到引入冲突 4按照实际需求对pom.xml的引入进行增删或者版本升级降级&#xff0c;直到以下图标中没有红线冲突即可

SQL注入 三范式

学习目标 了解三范式的要求 1. 什么是范式 设计关系数据库时&#xff0c;遵从不同的规范要求&#xff0c;设计出合理的关系型数据库&#xff0c;这些不同的规范要求被称为不同的范式&#xff0c;各种范式呈递次规范&#xff0c;越高的范式数据库冗余越小。 实际上家用电器都有…

香农极限是如何影响光纤容量的

1 引言 上世纪末&#xff0c;DWDM技术开始在干线通信中使用并迅速普及。虽然当时DWDM系统的容量只有402.5G&#xff0c;但实验室中DWDM支持的波道数甚至超过了1000波&#xff0c;单波道速率也飙到了惊人的160G&#xff08;超1000波和单波160G是两个独立事件&#xff09;。人们普…

docker快速搭建并使用Zabbix

docker搭建并使用Zabbix 0 zabbix基础知识 zabbix-server zabbix 的server 端&#xff0c;负责接收agent发送过来的监控数据&#xff0c;并且提供zabbix的所有核心功能。database 用于存储监控数据和配置信息的数据库&#xff0c;目前常用的有mysql和postgresql两种数据库。za…

【AutoSAR应用软件设计】

AutoSAR总体架构 是本文讲解内容。 接口类型 AUTOSAR接口 –SWCs和/或BSW模块交换的信息–独立于实施/网络/硬件–端口接口 标准化AUTOSAR接口 –AUTOSAR接口–标准化的语法和语义–标准化端口接口 标准化接口 –标准化API–通常为特定编程语言&#xff08;“C”&#x…

火狐浏览器鼠标点击页面区域文字时,出现光标的问题

点击一些资源卡片和查看别的页面时&#xff0c;发现点击非输入框的地方&#xff0c;出现了光标&#xff0c;误以为光标处可以填写东西&#xff0c;就试着敲了几次键盘&#xff0c;发现没有任何反应&#xff1b;然后就叫开发那个页面的同事过去看看&#xff1b;那个同事按F12各种…