上传字体文件,通过 FontFace 加载字体

1.需求场景

在 Vue项目中,上传字体文件,改变文字字体。

这就涉及到 JavaScript 字体文件的加载和使用。

2.实现方法

CSS 样式使用字体,并不陌生

在Vue组件中,引入项目资源中的字体文件

全局引入的方法

新建 font.css 文件

在 main.js 中引入

我这次说的是第三种,从本地上传字体文件。需要用到 JavaScriptFontFace 对象,用来加载字体。

基础语法:

a-upload 组件,customRequest 方法通过覆盖默认的上传行为,可以自定义自己的上传实现。

上传字体文件,通过 FontFace 添加字体。动态加载样式,成功改变字体。

以上,如果对你有用的话,不妨点赞收藏关注一下,谢谢 🙏

😊 微信公众号: OrzR3

💖 不定期更新一些技术类,生活类,读书类的文章。

以上,如果对你有用的话,不妨点赞收藏关注一下,谢谢 🙏

相关推荐
Lee川28 分钟前
🚀《JavaScript 灵魂深处:从 V8 引擎的“双轨并行”看执行上下文的演进之路》
javascript·面试
汪汪队长36 分钟前
谷歌浏览器自定义油猴插件
前端
ZFSS38 分钟前
SeeDance Tasks API 的对接和使用
前端·人工智能
睿智的仓鼠39 分钟前
🦞OpenClaw 快速部署及使用指南
前端·人工智能
前端付豪40 分钟前
Nest 项目小实践之图书增删改查
前端·node.js·nestjs
比特鹰40 分钟前
手把手带你用Flutter手搓人生K线
前端·javascript·flutter
大雨还洅下40 分钟前
前端JS: 数组扁平化
javascript
奔跑路上的Me1 小时前
前端导出 Word/Excel/PDF 文件
前端·javascript
bluceli1 小时前
JavaScript异步编程深度解析:从回调到Async Await的演进之路
前端·javascript
青青家的小灰灰1 小时前
Vue 3 新标准:<script setup> 核心特性、宏命令与避坑指南
前端·vue.js·面试