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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
笨蛋不要掉眼泪1 分钟前
Redis主从复制:原理、配置与实战演示
前端·redis·bootstrap·html
bigdata-rookie5 分钟前
Starrocks 数据模型
java·前端·javascript
白帽子凯哥哥7 分钟前
网络安全Web基础完全指南:从小白到入门安全测试
前端·sql·web安全·信息安全·渗透测试·漏洞
RFCEO13 分钟前
前端编程 课程十四、:CSS核心基础2:选择器优先级 + 伪类选择器(解决冲突+交互效果)
前端·css·交互·css选择器优先级判断规则详解·css important使用·css链接伪类lvha顺序·实现悬浮交互效果
web打印社区15 分钟前
前端实现浏览器预览打印:从原生方案到专业工具
前端·javascript·vue.js·electron
yuezhilangniao18 分钟前
# 告别乱码:用FastAPI特性与Next.js打造类型安全的API通信
javascript·安全·fastapi
jiayong2327 分钟前
Vue2 与 Vue3 生态系统及工程化对比 - 面试宝典
vue.js·面试·职场和发展
徐同保28 分钟前
vue.config.ts配置代理解决跨域,配置开发环境开启source-map
前端·javascript·vue.js
Hexene...1 小时前
【前端Vue】npm install时根据新的状态重新引入实际用到的包,不引入未使用到的
前端·vue.js·npm
2301_780669861 小时前
Vue(入门配置、常用指令)、Ajax、Axios
前端·vue.js·ajax·javaweb