当前位置: 首页 > news >正文

vue项目中引入字体文件样式

需求:关于一些样式需要自定义的,所以需要ui提供字体文件,然后引入项目中,就可实现自定义

首先看一下实现效果图:

第一步:新建一个字体样式文件用于放字体文件和css样式 

 

font.css文件:

/* 数字特殊字体 */
@font-face {/*给字体命名*/font-family: 'DINCondBold';/*引入字体文件*/src: url('./DINCond-Bold.otf');font-weight: normal;font-style: normal;
}/* 时间特殊字体 */
@font-face {/*给字体命名*/font-family: 'DigitalBold';/*引入字体文件*/src: url('./DS-Digital Bold.ttf');font-weight: normal;font-style: normal;
}

第二步:在main.js里面引入

第三步:页面使用 

相关文章:

vue项目中引入字体文件样式

需求:关于一些样式需要自定义的,所以需要ui提供字体文件,然后引入项目中,就可实现自定义 首先看一下实现效果图: 第一步:新建一个字体样式文件用于放字体文件和css样式 font.css文件: /* 数字特殊字体 */ font-face {/*给字体命名*/font-family: DINCondBold;/*引入字体文件*…...

Android 11强制App固定user_rotation方向显示

Android11 强制App按照user_rotation方向显示。 diff --git a/services/core/java/com/android/server/wm/DisplayRotation.java b/services/core/java/com/android/server/wm/DisplayRotation.java index b1d349d8e93d..f7fd2983c668 100644 --- a/services/core/java/com/an…...

Harbor仓库push显示

背景: 在做测试时发现harbor仓库端口开放这,却一直登录不上去,重启harbor资源包docker-compose还是不行,修改了docker.service文件不行,json文件也不行,以下是涉及到的命令和报错(好像是这个&am…...

Windows 上设置 MySQL 的主从复制

Windows 上设置 MySQL 的主从复制 一、前言1. 环境准备2. 主服务器配置3. 从服务器配置6. 测试复制7. 注意事项 一、前言 在 Windows 上设置 MySQL 的主从复制涉及几个步骤。下面是一个详细的指南,帮助你实现这一过程。 1. 环境准备 安装 MySQL: 确保你…...

鸿蒙内核源码分析(原子操作篇) | 谁在为原子操作保驾护航

基本概念 在支持多任务的操作系统中,修改一块内存区域的数据需要“读取-修改-写入”三个步骤。然而同一内存区域的数据可能同时被多个任务访问,如果在修改数据的过程中被其他任务打断,就会造成该操作的执行结果无法预知。 使用开关中断的方…...

vue3+ts封装axios以及解决跨域问题

目录 一、前言二、封装axios三、 解决跨域四、调用接口五、运行结果 一、前言 前端请求后端数据时,会用到axios,但是如果不将axios封装好,会导致代码冗余 二次封装的好处如下: 求头能统一处理便于接口的统一管理解决回调地狱配置…...

各厂家BI对比

帆软BI、奥威BI、永洪BI、思迈特BI、亿信华辰BI是国内知名的BI产品,不少企业在选型BI软件时都需要对这些BI软件进行了解,从中选择适合自己的一款。经过过年的发展,这些BI(商业智能)软件各自在多个行业中都有广泛的应用…...

SQL - 触发器

触发器是在插入、更新和删除语句前后自动执行的一堆SQL代码,但是触发器被触发后只会执行一次,通常我们使用触发器增强数据的一致性。创建触发器 -- 创建触发器 drop trigger if exists payments_after_insert; delimiter $$ -- 在 payments表 insert 之后…...

Redis中缓存穿透、缓存击穿、缓存雪崩的详解

如何理解Redis缓存的穿透、击穿、雪崩问题: 缓存穿透 是指缓存中和数据库中都没有数据,而用户不断访问,导致这个不存在的数据每次请求都要到存储层去查询,这样失去了意义。 缓存穿透的解决方案有哪些? 缓存null值布隆过滤增强…...

[Meachines] [Medium] Popcorn SQLI+Upload File+PAM权限提升

信息收集 IP AddressOpening Ports10.10.10.6TCP:22,80 $ nmap -p- 10.10.10.6 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 5.1p1 Debian 6ubuntu2 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: …...

【Linux】python进程管理之supervisor安装使用教程

安装supervisor pip install supervisor生成配置文件 echo_supervisord_conf > /etc/supervisord.conf修改配置文件 vim /etc/supervisord.conf[unix_http_server] file/run/supervisor.sock ; the path to the socket file[supervisord] logfile/var/log/supervisord.log…...

BEM架构

视频 总结&#xff1a; BEM架构&#xff1a;一个命名类的规范而已&#xff0c;说白了就是如何给类起名字使用sass的目的&#xff1a;在<style>中模块化的使用类名&#xff0c;同时减少代码数量 1、 BEM架构 &#xff08;通义灵码查询结果&#xff09; BEM (Block Ele…...

物联网(IoT)详解

物联网&#xff08;IoT&#xff09;详解 1. IoT定义简介2. IoT工作原理3. IoT关键技术4. 物联网与互联网区别5. IoT使用场景6. 开源物联网平台7. 参考资料 1. IoT定义简介 首先第一个问题&#xff0c;什么是物联网&#xff08;IoT&#xff09;? 物联网&#xff08;英文&#…...

ansync/await 运行流程图

1、流程图&#xff1a; 2、await 之后的方法是何时执行&#xff0c;如何执行的&#xff1f; await 的方法在 Task 执行完成之后&#xff0c;通过调用 Finish 方法执行的。 具体的执行步骤是先将 MoveNext 方法注册到 Task 的回调里&#xff0c;然后在 Task 执行完后调用这个方法…...

生产环境docker nginx+php8.0镜像

生产环境docker nginxphp8.0镜像 自定义创建php8.0镜像&#xff0c;创建dockerfile FROM php:8.0-fpm# 安装系统依赖 RUN sed -i s|http://deb.debian.org/debian|http://mirrors.aliyun.com/debian|g /etc/apt/sources.list && \apt-get update && apt-get i…...

【Hadoop】核心组件深度剖析:HDFS、YARN与MapReduce的奥秘

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《大数据前沿&#xff1a;技术与应用并进》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Hadoop简介 2、Hadoop生态系统概览 二、Hadoo…...

Docker Swarm部署SpringCloud Alibaba微服务踩坑记录

为了方便部署和维护微服务项目&#xff0c;还是得上集群部署方案&#xff0c;决定采用Docker的swarm&#xff0c;为什么不是k8s&#xff0c;因为部署骑来又是个新的工具&#xff0c;之前就一直用的docker&#xff0c;自带了类k8s的工具&#xff0c;索性就直接使用swarm了&#…...

深入理解Spring Boot中的AOP应用:从基础组件到高级功能的实现

深入理解Spring Boot中的AOP应用&#xff1a;从基础组件到高级功能的实现 在现代Java开发中&#xff0c;Spring Boot因其简洁性和强大的功能而被广泛采用。而AOP&#xff08;面向切面编程&#xff09;作为Spring框架的核心特性之一&#xff0c;为开发者提供了在不修改业务代码的…...

《区块链与监管合规:在创新与规范之间寻求平衡》

区块链技术作为近年来最具创新性和颠覆性的技术之一&#xff0c;已经在金融、供应链、医疗、物联网等多个领域展现出巨大的潜力。然而&#xff0c;随着其应用的不断拓展&#xff0c;如何应对监管和合规性要求成为了区块链发展道路上一个至关重要的问题。 区块链的去中心化、匿…...

Nuxt3【服务器】server 详解

server 文件夹中的内容&#xff0c;会被自动注册为API和服务器处理程序。 服务器 API 对应路径 server/api server/api/hello.ts export default defineEventHandler((event) > {return {hello: world} })页面中使用 <script setup lang"ts"> const { da…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...