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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
zhoumeina993 分钟前
设计器模版底图,一直渲染错误,是因为第一张图变形后内存中图片数据被改了,其他尺码一直错误
java·前端·javascript
小粉粉hhh8 分钟前
Node.js(四)——npm与包
前端·npm·node.js
雨落在了我的手上12 分钟前
初识java(四):程序逻辑控制
java·开发语言·前端
UXbot12 分钟前
Vibecoding 工具如何一次性生成 Web + iOS + Android 三端 APP?功能架构深度解读
android·前端·ui·ios·交互·软件构建·ai编程
小周技术驿站21 分钟前
Linux 基础命令详解
linux·前端·chrome·ubuntu·centos
ZC跨境爬虫24 分钟前
跟着 MDN 学 HTML day_42:(DOMTokenList 接口详解)
前端·javascript·ui·html·ecmascript·音视频
前端 贾公子25 分钟前
响应式系统基础:基于依赖追踪的响应式系统的本质(下)
前端·javascript·vue.js
幽络源小助理25 分钟前
团队个人科技主页HTML源码 黑客帝国风格个人简历网页模板
前端·科技·html
打工人小夏25 分钟前
使用finalshell在新服务器上部署前端页面
linux·服务器·前端·vue.js
恋猫de小郭28 分钟前
2026 Android I/O ,全新 AI 手机、 Android PC 和车载驾驶
android·前端·flutter