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

vue中替换全局字体

news 2025/12/29 0:16:59

一、背景

产品说项目要拿去展会展示，但现在项目字体是微软雅黑，不支持商用，需要全局替换思源字体。

二、下载字体

推荐一个网址，好用

字体天下，点击跳转
在这里插入图片描述

下载好的文件如下：
在这里插入图片描述

三、引入字体

1、在项目资源目录下新建一个fonts文件夹，引入下载好的字体文件

在这里插入图片描述

2、编写css文件（我的是font.less）

@font-face{font-family: HanSans;src: url('../fonts/SourceHanSansCN-VF-2.otf')
}

3、main.js引入思源字体

import '@/assets/css/font.less' // 引入思源字体

四、使用

1、在App.vue中

在这里插入图片描述

2、搜索font-family，看有没有被替换掉的字体，改过来

在这里插入图片描述

完事！

相关文章：

vue中替换全局字体

一、背景 产品说项目要拿去展会展示，但现在项目字体是微软雅黑，不支持商用，需要全局替换思源字体。 二、下载字体 推荐一个网址，好用 字体天下，点击跳转 下载好的文件如下： 三、引入字体 1、在项目…...

编程日记 2023/10/26 8:10:07

【AGC】.p12证书文件如何获取MD5

近期在使用DevEco Studio3.1打包应用时遇到了一个问题，我使用Build—Generate Key and CSR创建了密钥库文件。 我这里需要获取到创建的.p12证书文件的MD5值，于是在控制台使用了keytool -list -v -keystore D:\myapp.p12命令获取证书指纹，但是…...

编程日记 2023/10/26 8:09:07

vue2 quill 视频上传 ，基于ruoyi vue,oss

包含两种上传方式，第一种点开弹新页面可选url和点击上传。本文中是第二种，自己拼的。像点击上传图片一样，直接传video文件，原创不易，纯纯踩坑； 因为现阶段能搜索到的内容，99.5%都是一样的内容&…...

编程日记 2023/10/26 8:08:05

YOLOv8改进实战 | 更换损失函数之MPDIOU（2023最新IOU）篇

前言 YOLOv8官方默认损失函数采用的是CIoU。本章节主要介绍如何将MPDIoU损失函数应用于目标检测YOLOv8模型。 目录 一、MPDIoU二、代码实现添加损失函数更换损失函数一、MPDIoU 论文链接：MPDIoU: A Loss for Efficient and Accurate Bounding Box Regression MPDIoU是一种基于…...

编程日记 2023/10/26 8:07:03

图的应用1.0-----最小生成树问题

目录 前言 生成树 1.基本概念 2.生成树的特点 3.生成树形成过程 最小生成树(Minimum Spanning Tree) 1.基本概念 2.构造方法（MST） 普里姆(Prime)算法 1.算法思想 2.代码实现 克鲁斯卡尔（Kruskal）算法 1.算法思想 2.代码…...

编程日记 2023/10/26 8:06:02

【计算机网络笔记】网络应用对传输服务的需求

系列文章目录 什么是计算机网络？ 什么是网络协议？ 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能（1）——速率、带宽、延迟 计算机网络性能（2）…...

编程日记 2023/10/26 8:05:01

IDEA启动报错：Command line is too long的解决办法

文章目录 1.报错现象2.解决办法验证3.最佳实践4.问题原因5.参考文献1.报错现象 在idea中启动一个spring cloud项目时，编译完成后直接报错，报错内容如下： Error running XXXApplication:Command line is too long. Shorten command line for XXXApplication or also for Sp…...

编程日记 2023/10/26 8:03:59

Android 中的 本地广播LocalBroadcastManager

Android 中的 本地广播LocalBroadcastManager 文章目录 Android 中的 本地广播LocalBroadcastManager一、LocalBroadcastManager 的基本作用二 、LocalBroadcastManager 的基本使用1、包的导入（1）Android 源码中bp文件的导入：（2&a…...

编程日记 2023/10/26 8:02:58

题目 1120: C语言训练-“水仙花数“问题2python详解）——练气三层后期

✨博主：命运之光 🦄专栏：算法修炼之练气篇（C\C版） 🍓专栏：算法修炼之筑基篇（C\C版） 🍒专栏：算法修炼之练气篇（Python版） ✨…...

编程日记 2023/10/26 8:01:57

sheng的学习笔记-【中】【吴恩达课后测验】Course 3 - 结构化机器学习项目 - 第二周测验

课程3_第2周_测验题 目录：目录 要解决的问题 ① 为了帮助你练习机器学习的策略，本周我们将介绍另一个场景，并询问你将如何行动。 ② 我们认为这个在机器学习项目中工作的“模拟器”将给出一个任务，即领导一个机器学习项目可能…...

编程日记 2023/10/26 8:00:56

基于Pytorch的驾驶员分心行为实时检测

本文使用深度学习和Pytorch(PyTorch 2.0.1\Torchvision 0.15.2)实时检测驾驶员的分心行为，并附录完整代码。 检测分心驾驶是现代汽车中最重要的功能之一。无论是自动驾驶汽车还是其它高端汽车，都配备了驾驶员监控系统，以持续跟踪驾驶员的行为。这对确保驾驶员保持目光在道路…...

编程日记 2023/10/26 7:59:55

【uniapp】小程序开发7：自定义组件、自动注册组件

一、自定义轮播图组件、自动注册 以首页轮播图组件为例。 1、创建组件文件src/components/my-swipper.vue 代码如下&#xff1a; <template><view><view class"uni-margin-wrap"><swiper class"swiper" circular :indicator-dots…...

编程日记 2023/10/26 7:58:54

Modbus转MQTT以太网网关MQT-802主要特点和典型应用

随着社会的快速发展&#xff0c;物联网已经潜移默化地深入工控行业的各个领域&#xff0c;其高效的资源整合和强大的数据采集能力&#xff0c;深受客户的喜爱。上海泗博为实现客户在云端平台接收处理世界万物的信息以及实现远程控制&#xff0c;精心打造一款全新物联网产品&…...

编程日记 2023/10/26 7:56:53

Go学习第五章——函数与包

Go学习第五章——函数与包 1 函数1.1 基本语法1.2 函数多返回值1.3 函数的可见性和包级函数1.4 函数调用机制底层原理1.5 值类型和引用类型1.6 注意事项和细节1.7 逃逸机制&#xff08;补&#xff0c;可不看&#xff09; 2 包2.1 快速入门2.2 包的使用细节 3 函数详细讲解3.1 递…...

编程日记 2023/10/26 7:54:50

【Python 常用脚本及命令系列 5 -- 如何使用 BeautifulSoup 解析CSDN网页表格中的数据】

文章目录 Python BeautifulSoup 介绍CSDN 网页表格解析开发问题总结 Python BeautifulSoup 介绍 BeautifulSoup是一个Python库&#xff0c;用于解析HTML和XML文档。它常常用于网络爬虫来提取网页中的信息。 以下是BeautifulSoup的一些主要特性&#xff1a; 解析HTML&#xff…...

编程日记 2023/10/26 7:53:48

OpenFeign实现分析、源码解析

什么是openfeign? 是springcloud全家桶的组件之一&#xff0c;其核心作用是为Rest API提供高效简洁的rpc调用方式。 为什么只定义接口而没有实现类&#xff1f; 源码解读&#xff08;省略&#xff09; 总结&#xff1a; 源码分析&#xff1a;如何发送http请求&#xff1f; …...

编程日记 2023/10/26 7:52:46

2023 10月最新Vmd 下载安装教程，WindowsLinux

文章目录 下载Vmdwindows版本安装LINUX版本安装 下载Vmd 谷歌搜索VMD 点击左下角download VMD 可选择对应版本 注&#xff1a;点击后会出现输入用户名和密码&#xff0c;由于我已注册&#xff0c;界面不见了&#xff0c;所以直接描述一下。 输入用户名和密码然后会出现让登记…...

编程日记 2023/10/26 7:51:45

Photoshop（PS）安装教程（图文教程超详细）

目录 一.简介 二.安装步骤 软件&#xff1a;PS版本&#xff1a;2023语言&#xff1a;简体中文大小&#xff1a;3.20G系统要求&#xff1a;Win10&#xff08;1903&#xff09;及以上版本&#xff0c;64位操作系统硬件要求&#xff1a;CPU2.0GHz 内存8G(或更高&#xff0c;不支…...

编程日记 2023/10/26 7:49:41

C++模版进阶

一、非类型模版参数 之前学习的模版&#xff0c;参数一般是某种类型&#xff0c;但其实非类型的参数也可以定义在模版里面&#xff0c;但也有一定的限制&#xff0c;只可以定义整形家族的参数&#xff0c;而且具有常量性 注意&#xff1a; 1. 浮点数、类对象以及字符串是不允…...

编程日记 2023/10/26 7:48:40

CloudCompare

CloudCompare 源码编译Windows 功能格式转换 源码编译 Windows 源码编译出来的默认基本不带几个插件&#xff0c;包括保存为 .las 的功能 可以直接从 https://www.danielgm.net/cc/ 下载编译好的版本&#xff0c;插件比较多。也有免安装版本 cmake -B build -S . -G "Vi…...

编程日记 2023/10/26 7:45:35

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/12/25 15:18:59

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/12/12 23:11:21

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/12/25 22:31:26

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2025/12/25 10:31:49

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/11/8 20:34:42