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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
kyriewen9 分钟前
为什么我的代码在测试环境跑得好好的,一到用户电脑就崩?原来凶手躲在地址栏旁边
前端·javascript·chrome
Wect12 分钟前
LeetCode 215. 数组中的第K个最大元素:大根堆解法详解
前端·算法·typescript
ETA813 分钟前
面试官:说说事件冒泡与委托?这是我见过最透彻的回答
前端·javascript
C澒18 分钟前
PC 桌面富应用:速分客户端
前端·c++·electron·web app
朝阳58140 分钟前
局域网聊天工具
javascript·rust
晴天1640 分钟前
Neutralinojs 核心原理解析
javascript·electron·node.js
朝阳5811 小时前
我做了一个局域网传文件的小工具,记录一下
javascript·rust
tzy2331 小时前
Vue和React之争
前端·vue.js·react.js
网络点点滴1 小时前
Vue3中toRaw和MarkRaw
前端·javascript·vue.js
郭wes代码1 小时前
2026年前端面试题及干货
javascript