vue中替换全局字体

news2024/11/14 19:44:58

一、背景

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

二、下载字体

推荐一个网址,好用

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

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

三、引入字体

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,看有没有被替换掉的字体,改过来

在这里插入图片描述

完事!

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

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

相关文章

深入理解指针:【探索指针的高级概念和应用一】

目录 前言: 1. 字符指针 2. 指针数组 3.数组指针 3.1数组指针的定义 3.2 &数组名VS数组名 3.3数组指针的使用 前言: 🍂在了解今天的内容之前我们先复习一下指针的基本概念: 1,内存单元是有编号的&#xff…

C++前缀和算法的应用:摘水果 原理源码测试用例

本文涉及的基础知识点 C算法:前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 题目 在一个无限的 x 坐标轴上,有许多水果分布在其中某些位置。给你一个二维整数数组 fruits ,其中 fruits[i] [positioni, amounti] 表示共…

读高性能MySQL(第4版)笔记20_Performance Schema和其他

1. 线程 1.1. MySQL服务端是多线程软件。它的每个组件都使用线程 1.2. 每个线程至少有两个唯一标识符 1.2.1. 操作系统线程ID 1.2.2. MySQL内部线程ID 2. 对象类型 2.1. OBJECT_TYPE列 2.2. EVENT 2.3. FUNCTION 2.4. PROCEDURE 2.5. TABLE 2.6. TRIGGER 3. Perfor…

RunnerGo UI自动化使用流程

可以直接进入官网下载开源版或点击右上角体验企业版体验 RunnerGo UI自动化平台 RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块,覆盖了整个产品测试周期。 RunnerGo UI自动化基于Selenium浏览器自动化方案构建,内嵌高度…

Java并发线程池原理源码深入分析与调优实战

一,开篇: java中提供了多线程设计的Api,为什么还要用线程池呢? 下来看两个例子: 1. 使用多线程跑十万次 2. 使用线程池跑十万次 使用多线程跑十万次 package com.laoyang.ThreadPool.公开课;import java.util.ArrayL…

让图片完美适应:掌握 CSS 的object-fit与object-position

在CSS中,我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像(以及其他替代元素,如视频)做类似的操作。在本文中,我们将…

Photoshop(PS)安装教程(图文教程超详细)

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

蓝桥算法赛(铺地板)

问题描述 小蓝家要装修了,小蓝爸爸买来了很多块(你可以理解为数量无限) 23 规格的地砖,小蓝家的地板是 nm 规格的,小蓝想问你,能否用这些 23 的地砖铺满地板。 铺满地板:对于地板的每个区域&…

Apipost现已支持连接数据库!

Apipost提供了数据库连接功能,在接口调试时可以使用数据库获取入参或进行断言校验。目前的Apipost支持:Mysql、SQL Sever、Oracle、Clickhouse、达梦数据库、PostgreSQL、Redis、MongoDB 8种数据库的连接操作 新建数据库连接: 在「项目设置…

Openssl数据安全传输平台010:jasoncpp 0.10.7的编译 - Windows-vs2022 / Ubuntu/ Centos8 -含测试代码

文章目录 0. 代码仓库1 安装1.1 windows 下的安装1.2 Linux 下的安装1.2.1 相关环境配置问题1.2.2 准备安装1.2.2.1 安装scons1.2.2.2 安装jsoncppUbuntu系统下Centos8系统下 2 编译 c 测试文件: json-test.cpp2.1 配置库文件2.2 配置VS2.3 Winsows系统下cpp文件测试…

java集成海康预览抓图出现内存一直上涨问题

求助:在java 中集成海康sdk后批量抓图出现内存上涨问题,不论是预览后不关闭继续预览,还是预览后关闭预览,然后重新预览都没有解决这个问题(抓图正常),尝试使用第三方解码器ffmpeg来进行解码&…

聊聊今年的秋招

大家好啊,我是董董灿。 又是一年秋招季,身边不少小伙伴反馈,今年的秋招很卷,很多人在刚到9月份的时候就开始投简历到处面试了。 不少同学甚至坐火车去外地参加笔试和面试,来回折腾的同时,也让周围的同学都…

[ACTF2020 新生赛]Include 1

题目环境:超链接,点进去看看你能找到flag吗?除了这些网页什么都没有,但是不当紧,因为我们有一双善于发现的眼睛👀F12瞅瞅无,并无其他等等URL看了吗?发现存在一个参数file&#xff0c…

18 行为型模式-观察者模式

行为模式共有11种: 观察者模式 模板方法模式 策略模式 职责链模式 状态模式 命令模式 中介者模式 迭代器模式 访问者模式 备忘录模式 解释器模式 以上 11 种行为型模式,除了模板方法模式和解释器模式是类行为型模式,其他的全部属于对象行为型…

ShardingSphere-JDBC分库分表快速入门实战

🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:My…

xhadmin多应用Saas框架如何安装情侣飞行棋?

xhadmin是什么? xhadmin 是一套基于最新技术的研发的多应用 Saas 框架,支持在线升级和安装模块及模板,拥有良好的开发框架、成熟稳定的技术解决方案、提供丰富的扩展功能。为开发者赋能,助力企业发展、国家富强,致力于…

设置爱奇艺代理教程

设置爱奇艺代理教程 活泼与直观:设置爱奇艺代理,让你的网络更加自由! 轻松口语化:首先,打开爱奇艺APP,进入设置页面。 设置->网络->代理设置 活泼与直观:在代理设置页面,我…

Vue3富文本编辑器组件封装

近期后台项目有使用富文本编辑器的需求,本文记录一下封装细节 1.富文本组件库参考 TinyMCE - 富文本编辑器里的 Word ,功能想不到的丰富tiptap - 多人在线实时协同编辑CKEditor 5 - 开源免费可商用,行内编辑Quill - 易扩展、轻量级二开、代码…

sql第二次上机作业

1查找借阅了ISBN为“4-6045-1023-4”的借书证号,读者姓名,专业名和借书时间 use tsgl go select Reader.Lno,Rname,Spec,Lend.Bordate FROM Reader,Lend WHERE Reader.LnoLend.Lno AND ISBN 4-6045-1023-42查找借阅了《数据库原理》一书的借阅信息&…

Kubernetes(K8S)快速搭建typecho个人博客

Kubernetes(K8S)快速搭建typecho个人博客 1、准备工作 K8S集群环境,搭建教程参考腾讯云Lighthouse组建跨地域Kubernetes集群 K8S集群面板,搭建教程参考Kubernetes集群管理面板的安装及使用 - 青阳のblog-一个计算机爱好者的个人…