前端使用fontfaceobserver库实现字体设置
要使用FontFaceObserver来加载设置项目本地的字体,先确保字体文件位于项目中或者可以从服务端获取到,这样就可以使用FontFaceObserver来检测并加载这些字体
主要有以下几步:
- npm或者yarn安装引入fontfaceobserver
- 字体资源引入和font-face配置
- 使用FontFaceObserver加载字体并设置fontFamily
下面写个伪代码的示例:
首先引入字体资源,css配置字体
font.css
@font-face {font-family: '苹方 Medium';src: url('./cn/苹方 Medium.otf');
}
@font-face {font-family: '新宋体';src: url('./cn/新宋体.ttc');
}
这个style样式可以写在需要设置字体的组件中,当然也可以分开以文件的方式引入,我建议分开更好,更符合模块化
font.js
/** @Description: 字体文件列表*/const cnList = [{name: '苹方 Medium',fontFamily: '苹方 Medium',},{name: '新宋体',fontFamily: '新宋体',},
];export default [...cnList];
如果用请求实现字体列表的方式实现的话,这个可以写在需要设置字体的组件中,当然也可以分开以文件的方式引入,这种本地字体更好,我建议分开更好,更符合模块化
如过需要从服务端或者其他服务引用文件字体列表
目标文件.vue
<!-- 字体 -->
<div class="left font-selector"><Select v-model="fontAttr.fontFamily" @on-change="changeFontFamily"><Option v-for="item in fontFamilyList" :value="item.name" :key="`font-${item.name}`"><div class="font-item" v-if="!item.preview">{{ item.name }}</div><div class="font-item" v-else :style="`background-image:url('${item.preview}');`">{{ !item.preview ? item : '' }}<!-- 解决无法选中问题 --><span style="display: none">{{ item.name }}</span></div></Option></Select>
</div>//将上面编写的字体列表js文件引入
import fontList from '@/assets/fonts/font';
const fontFamilyList = ref([...fontList]);//字体请求
const getFontList = async () => {const res = await axios.get('xxx/font.json');console.log('font response', res);fontFamilyList.value = [...fontFamilyList.value,...Object.entries(res.data).map(([, value]) => value),];
};// 修改字体
const changeFontFamily = (fontName) => {console.log('changeFontFamily fontName', fontName);if (!fontName) return;// 字体加载并设置const loadingInstance = ElLoading.service(options)const font = new FontFaceObserver(fontName);console.log('font', font);font.load(null, 15000).then(() => {console.log('字体加载成功');document.documentElement.classList.add('fonts-loaded')document.body.classList.add('font-loaded');loadingInstance.close()}).catch((err) => {console.log(err);loadingInstance.close()});
};<style scoped lang="less">
@import url('@/assets/fonts/font.css');
</style>
最简单的用法如下:
<script>
const font = new FontFaceObserver('自定义字体名')
font.load().then().catch()
</script><style>@font-face {font-family: 自定义字体名;src: url('字体包路径');}
</style>
这样一个前端字体动态设置的功能就实现了。
相关文章:
前端使用fontfaceobserver库实现字体设置
要使用FontFaceObserver来加载设置项目本地的字体,先确保字体文件位于项目中或者可以从服务端获取到,这样就可以使用FontFaceObserver来检测并加载这些字体 主要有以下几步: npm或者yarn安装引入fontfaceobserver字体资源引入和font-face配置…...
【人工智能】Python常用库-PyTorch常用方法教程
PyTorch 是一个强大的开源深度学习框架,以其灵活性和动态计算图而广受欢迎。以下是 PyTorch 的详细教程,涵盖从基础到实际应用的使用方法。 1. 安装与导入 1.1 安装 PyTorch 访问 PyTorch 官方网站,根据系统、Python 版本和 CUDA 支持选择安…...
Android Studio安装TalkX AI编程助手
文章目录 TalkX简介编程场景 TalkX安装TalkX编程使用ai编程助手相关文章 TalkX简介 TalkX是一款将OpenAI的GPT 3.5/4模型集成到IDE的AI编程插件。它免费提供特定场景的AI编程指导,帮助开发人员提高工作效率约38%,甚至在解决编程问题的效率上提升超过2倍…...
#渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现02-永恒之蓝漏洞
免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…...
gitlab自动打包python项目
现在新版的gitlab可以不用自己配置runner什么的了 直接写.gitlab-ci.yml文件就行,这里给出一个简单的依靠setup把python项目打包成whl文件的方法 首先写.gitlab-ci.yml文件,放到项目根目录里 stages: # List of stages for jobs, and their or…...
残差神经网络
目录 1. 梯度消失问题 2. 残差学习的引入 3. 跳跃连接(Shortcut Connections) 4. 恒等映射与维度匹配 5. 反向传播与梯度流 6. 网络深度与性能 总结 残差神经网络的原理是基于“残差学习”的概念,它旨在解决深度神经网络训练中的梯度消…...
mini-spring源码分析
IOC模块 关键解释 beanFactory:beanFactory是一个hashMap, key为beanName, Value为 beanDefination beanDefination: BeanDefinitionRegistry,BeanDefinition注册表接口,定义注册BeanDefinition的方法 beanReference:增加Bean…...
黑马程序员Java项目实战《苍穹外卖》Day01
苍穹外卖-day01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示: 管理端-外卖商家使用 用户端-点餐用户使用 当我们完成该项目的学习,可以培养以下能力: 1. 软件开发整体介绍 作为一…...
uniapp开发支付宝小程序自定义tabbar样式异常
解决方案: 这个问题应该是支付宝基础库的问题,除了依赖于官方更新之外,开发者可以利用《自定义 tabBar》曲线救国 也就是创建一个空内容的自定义tabBar,这样即使 tabBar 被渲染出来,但从视觉上也不会有问题 1.官方文…...
python+django5.1+docker实现CICD自动化部署springboot 项目前后端分离vue-element
一、开发环境搭建和配置 # channels是一个用于在Django中实现WebSocket、HTTP/2和其他异步协议的库。 pip install channels#channels-redis是一个用于在Django Channels中使用Redis作为后台存储的库。它可以用于处理#WebSocket连接的持久化和消息传递。 pip install channels…...
python代码示例(读取excel文件,自动播放音频)
目录 python 操作excel 表结构 安装第三方库 代码 自动播放音频 介绍 安装第三方库 代码 python 操作excel 表结构 求出100班同学的平均分 安装第三方库 因为这里的表结构是.xlsx文件,需要使用openpyxl库 如果是.xls格式文件,需要使用xlrd库 pip install openpyxl /…...
【第十课】Rust并发编程(一)
目录 前言 Fork和Join 前言 本节会介绍Rust中的并发编程,并发编程在编程中是提升cpu使用率的一大利器,通过多线程技术提升效率,Rust的并发和其他编程语言的并发不同的地方在于,Rust号称无畏并发。更重要的一点是安全。Rust中所有…...
图形渲染性能优化
variable rate shading conditional render 设置可见性等, 不需要重新build command buffer indirect draw glMultiDraw* - 直接支持多次绘制glMultiDrawIndirect - 间接多次绘制multithreading 多线程录制 实例化渲染 lod texture array 小对象剔除 投影到…...
elasticsearch的索引模版使用方法
5 索引模版⭐️⭐️⭐️⭐️⭐️ 索引模板就是创建索引时要遵循的模板规则索引模板仅对新创建的索引有效,已经创建的索引并不受索引模板的影响 5.1 索引模版的基本使用 1.查看所有的索引模板 GET 10.0.0.91:9200/_index_template2.创建自定义索引模板 xixi &…...
论文学习——进化动态约束多目标优化:测试集和算法
论文题目:Evolutionary Dynamic Constrained Multiobjective Optimization: Test Suite and Algorithm 进化动态约束多目标优化:测试集和算法(Guoyu Chen ,YinanGuo , Member, IEEE, Yong Wang , Senior Member, IEEE, Jing Liang , Senior …...
C++中的volatile关键字
作用: 1.它用于修饰变量,告知编译器该变量的值可能会在程序的外部被改变,编译器不能对这个变量的访问进行优化。这是因为编译器通常会对代码进行优化,例如把变量的值缓存到寄存器中,但对于 volatile 变量,…...
linux桌面qt应用程序UI自动化实现之dogtail
1. 前言 Dogtail适用于Linux 系统上进行 GUI 自动化测试,利用 Accessibility 技术与桌面程序通信;Dogtail 包含一个名为 sniff 的组件,这是一个嗅探器,用于 GUI 程序追踪; 源码下载:dogtail PyPI 可通过sudo python setup.py install安装或sudo pip install dogt…...
Hello World C#
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System; 引入了System命名空间,基本输入输出。一般只用这个,后面的不用 using System.Collections.Generic; 包含了定…...
SAP开发语言ABAP开发入门
1. 了解ABAP开发环境和基础知识 - ABAP简介 - ABAP(Advanced Business Application Programming)是SAP系统中的编程语言,主要用于开发企业级的业务应用程序,如财务、物流、人力资源等模块的定制开发。 - 开发环境搭建 - 首先需…...
应急响应靶机——easy溯源
载入虚拟机,开启虚拟机: (账户密码:zgsfsys/zgsfsys) 解题程序.exe是额外下载解压得到的: 1. 攻击者内网跳板机IP地址 2. 攻击者服务器地址 3. 存在漏洞的服务(提示:7个字符) 4. 攻击者留下的flag(格式…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
【Ftrace 专栏】Ftrace 参考博文
ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...
13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析
LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...
ubuntu中安装conda的后遗症
缘由: 在编译rk3588的sdk时,遇到编译buildroot失败,提示如下: 提示缺失expect,但是实测相关工具是在的,如下显示: 然后查找借助各个ai工具,重新安装相关的工具,依然无解。 解决&am…...
