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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
简单哟28 分钟前
vue封装axios请求
前端·javascript·vue.js
摇光9343 分钟前
js观察者模式
开发语言·javascript·观察者模式
潜龙在渊灬1 小时前
【100%面试题】总有一天在JS 精度问题上你会踩坑
前端·javascript·面试
肉三1 小时前
掌握 Node.js 中的安全身份验证:使用 bcrypt.js 和 JWT 登录/注销
javascript·安全·node.js
佩淇呢1 小时前
CSS响应式
前端·css
林涧泣2 小时前
【Uniapp-Vue3】onUnload页面卸载和onPageScroll页面监听滚动
前端·javascript·uni-app
呆头呆脑~2 小时前
逆向 易九批 最新版 爬虫逆向 x-sign ......
javascript·爬虫·python·算法·网络爬虫
Xudde.2 小时前
HTML中meta的用法
java·前端·javascript·笔记·html
傻小胖3 小时前
react的statehook useState Hook详细使用
前端·javascript·react.js
).(3 小时前
el-table横向滚动条,滚动后消失
前端·css·css3