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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
lolo大魔王3 小时前
Gin 框架响应格式与 HTML 模板渲染完整实战教程
前端·html·gin
llz_1125 小时前
web-第二次课后作业
前端·后端·web
vipbic10 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
ZC跨境爬虫12 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦12 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报12 小时前
网海三部曲·无名宗师传
javascript·人工智能
喵个咪12 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
qq_25183645713 小时前
SpringBoot+Vue 共享电池柜管理系统 完整实现 前后端分离项目实战 完整代码
vue.js·spring boot·后端
摆烂大大王14 小时前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao14 小时前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端