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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
隔壁的大叔22 分钟前
由于vite版本不一致,导致vue组件引入报错
javascript·vue.js
申阳25 分钟前
Day 11:集成百度统计以监控站点流量
前端·后端·程序员
Cache技术分享34 分钟前
239. Java 集合 - 通过 Set、SortedSet 和 NavigableSet 扩展 Collection 接口
前端·后端
超级罗伯特38 分钟前
大屏自适应,响应式布局,亲测有效
前端·javascript·html·大屏·驾驶舱
青衫码上行38 分钟前
【Java Web学习 | 第九篇】JavaScript(3) 数组+函数
java·开发语言·前端·javascript·学习
前端老宋Running39 分钟前
React组件命名为什么用小写开头会无法运行?
前端·react.js·面试
我是ed.39 分钟前
vue2 使用 cesium 展示 TLE 星历数据
vue.js·cesium
百***071840 分钟前
WebSpoon9.0(KETTLE的WEB版本)编译 + tomcatdocker部署 + 远程调试教程
前端
ruanCat41 分钟前
对 changelogen 和 changelogithub 使用的思考
前端·github
前端Hardy1 小时前
HTML&CSS&JS:赛博木鱼
前端·javascript·css