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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
谙忆10242 分钟前
WebCodecs 实战:用 ImageDecoder 和 VideoFrame 在浏览器里做硬件加速的帧处理
前端
JerrySir5 分钟前
密码没泄露,2FA 也没失效:Chrome 146 为什么还要让 Cookie“搬不走”?
前端
小蚂蚁i5 分钟前
React Hooks 原理深度解析:从会用到真正懂
前端·react.js
触底反弹11 分钟前
Vue 实战:手把手教你实现 ChatGPT 同款打字机效果
前端·javascript·人工智能
BreezeJiang13 分钟前
Vue 3 流式输出实战:ReadableStream + DeepSeek API 实现打字机对话
前端
用户EasyAdminBlazor20 分钟前
EasyAdminBlazor 第十篇:数据导入导出——批量处理不再麻烦
前端·后端
饮茶三千21 分钟前
电子保函模板编辑器实战二:HTML→FTL 编译转换的设计与实现
前端·vue.js·设计模式
英勇无比的消炎药26 分钟前
表单筛选利器:TinyVue BaseSelect 基础选择器实战
vue.js
ricardo197326 分钟前
SSR / SSG 性能对比:Next.js 三种渲染模式实测数据
前端·面试
Kel27 分钟前
Node.js 本质:从全脉络视角理解运行时原理
javascript·设计模式·node.js