vue中替换全局字体

一、背景

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

二、下载字体

推荐一个网址,好用

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

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

三、引入字体

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.mzph.cn/news/119263.shtml

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

相关文章

Maven学习

Maven介绍 Maven是Apache的一个开源项目,主要服务于基于Java平台的项目构建,依赖管理和项目信息管理。 Maven可以让团队能够更科学的构建项目,我们可以用配置文件的方式,对项目的名称、描述、项目版本号、项目依赖等信息进行描述…

如何在Postman中使用静态HTTP

首先,打开 Postman 软件。在 Postman 的菜单栏中,点击 “Preferences”(偏好设置)。 亲身经验:我自己尝试了这个方法,发现它非常适用于需要使用HTTP的场景。 数据和引证:根据 Postman 官方文档…

【tio-websocket】9、服务配置与维护—TioConfig

场景 我们在写 TCP Server 时,都会先选好一个端口以监听客户端连接,再创建N组线程池来执行相关的任务,譬如发送消息、解码数据包、处理数据包等任务,还要维护客户端连接的各种数据,为了和业务互动,还要把这些客户端连接和各种业务数据绑定起来,譬如把某个客户端绑定到一…

系统升级数量超微软预期,Win10/11盗版激活被封杀

声明:本文提供的命令、工具来自第三方网站,仅供学习交流使用,下载后24小时内删除,一切非法使用责任由使用者自行承担。 上月底 Win11 迎来了 Moment 4 功能更新,任务栏取消合并居然真的回归了。 巨硬终于妥协&#x…

C#使用mysql-connector-net驱动连接mariadb报错

给树莓派用最新的官方OS重刷了一下,并且用apt install mariadb-server装上“mysql”作为我的测试服务器。然后神奇的事情发生了,之前用得好好的程序突然就报错了,经过排查,发现在连接数据库的Open阶段就报错了。写了个最单纯的Con…

数字取证对有效企业事件响应的重要性

数字取证对有效企业事件响应的重要性 事件响应功能的现代化已成为企业安全的关键焦点,数字取证调查的支持是事件响应的重要组成部分,并就如何优化交互提供了指导,尤其是在CISO 领导的团队选择商业平台和工具的情况下。 企业事件响应简介 现代…

Redis缓存(缓存预热,缓存穿透,缓存雪崩,缓存击穿)

目录 一, 缓存 1, 什么是缓存 2, 什么是热点数据(热词) 3, 缓存更新策略 3.1 定期生成 3.2 实时生成 二, Redis缓存可能出现的问题 1, 缓存预热 1.1 什么是缓存预热 1.2 缓存预热的过程 2, 缓存穿透 2.1 什么是缓存穿透 2.2 缓存穿透产生的原因 2.3 缓存穿透的解…

超市商品管理系统 毕业设计 JAVA+Vue+SpringBoot+MySQL

项目下载地址 目录 项目下载地址 一、摘要1.1 简介1.2 项目录屏 二、研究内容2.1 数据中心模块2.2 超市区域模块2.3 超市货架模块2.4 商品类型模块2.5 商品档案模块 三、系统设计3.1 用例图3.2 时序图3.3 类图3.4 E-R图 四、系统实现4.1 登录4.2 注册4.3 主页4.4 超市区域管理4…

基于MIMO+16QAM系统的VBLAST译码算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ........................................................................ for SNR_dBSNRS…

桉木红面模板批发915*1830mm规格建筑木胶板

我们很自豪地介绍我们的产品:桉木红面建筑模板。作为一家专业的建筑木胶板生产批发商,我们提供高质量的915*1830*15mm规格的桉木红面板,为您的建筑项目提供卓越的解决方案。 桉木红面板是由优质的桉木原料制成,经过精细的加工和处…

[Go版]算法通关村第十八关青铜——透析回溯的模版

目录 认识回溯思想回溯的代码框架从 N 叉树说起有的问题暴力搜索也不行回溯 递归 局部枚举 放下前任Go代码【LeetCode-77. 组合】回溯热身-再论二叉树的路径问题题目:二叉树的所有路径Go 代码 题目:路径总和 IIGo 代码 回溯是最重要的算法思想之一&am…

flinksql kafka到mysql累计指标练习

flinksql 累计指标练习 数据流向:kafka ->kafka ->mysql 模拟写数据到kafka topic:wxt中 import com.alibaba.fastjson.JSONObject; import org.apache.kafka.clients.producer.KafkaProducer; import org.apache.kafka.clients.producer.Produ…

新手入门?初登开发者舞台的你所适合的三大开发工具?

对新手开发者来说,工具的简洁性和实用性和自己的产出直接挂钩,一个好用的工具往往会让编译代码减少很多麻烦,有哪些比较适合的工具,几乎成了每个新人必定会问的问题之一。 针对这些疑惑,今天就来讲讲三大新手型开发工…

多张照片怎么打包发给别人?几个步骤轻松搞定!

在工作和生活中,我们常常需要发送多张照片,因为照片数量较多,打包可以减少发送时间,提高发送效率。那么如何操作呢?有什么好用的软件呢?下面向大家介绍三种常用的软件。 方法一:使用7-zip 1、在…

uni-app打包apk实现自动更新

一、直接复制粘贴就可用(豪横) app.vue文件里写 //app.vue里写 <script>export default {onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)},onLaunch: function() {let appVersion uni.getSystemInfo({success: function(e) {ap…

更新电脑显卡驱动的操作方法有哪些?

更新显卡驱动可以有效的提升我们电脑的性能&#xff0c;可以通过设备管理器、显卡驱动软件等方式进行检查驱动是否需要更新&#xff0c;并修复一些电脑上已知的显卡问题。 然而&#xff0c;对于一些不是很懂电脑技术的人员来说&#xff0c;更新电脑显卡驱动是一件比较复杂和混乱…

视频号视频提取小程序,快速下载视频号视频

​视频号提取小程序可以帮助用户方便地从视频号视频平台获取到自己喜欢的视频号内容。通过这个小程序&#xff0c;你可以快速搜索并提取出视频号&#xff0c;并进行相关的操作。 据悉视频下载bot小程序目前已经更名为【提取下载小助手】 使用视频号提取小程序有以下几个步骤&…

1.验证码绕过

1.环境 1.前端验证码 抓包 发到重放器 可重复使用 爆破 总结&#xff0c;前端的验证直接删除验证码即可开始爆破 服务端 3.token 爆破

pycharm远程连接Linux服务器

文章目录 一&#xff1a;说明二&#xff1a;系统三&#xff1a;实现远程连接方式一&#xff1a; 直接连接服务器不使用服务器的虚拟环境步骤一&#xff1a;找到配置服务器的地方步骤二&#xff1a;进行连接配置步骤三&#xff1a;进行项目文件映射操作步骤四&#xff1a;让文件…

如何在群晖Synology+Office实现多人编辑一个文件?

使用群晖Synology Office提升生产力&#xff1a;多人同时编辑一个文件 文章目录 使用群晖Synology Office提升生产力&#xff1a;多人同时编辑一个文件本教程解决的问题是&#xff1a;1. 本地环境配置2. 制作本地分享链接3. 制作公网访问链接4. 公网ip地址访问您的分享相册5. 制…