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

1.需求场景

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

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

2.实现方法

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

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

全局引入的方法

新建 font.css 文件

在 main.js 中引入

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

基础语法:

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

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

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

😊 微信公众号: OrzR3

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

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

相关推荐
提笔惊蚂蚁17 分钟前
java-web-苍穹外卖-day1:软件开发步骤简化版+后端环境搭建
java·开发语言·前端·程序人生
customer0819 分钟前
【开源免费】基于SpringBoot+Vue.JS美发门店管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·kafka·开源
灌江口话事人33 分钟前
html(超文本标记语言)
前端·html
方方怪34 分钟前
HTML之图片和超链接的学习记录
前端·学习·html
方方怪36 分钟前
HTML之表格学习记录
前端·html
Parrot 安全小子37 分钟前
HTML(超文本标记语言)
前端·html
孩子 你要相信光38 分钟前
sanitize-html 防止 XSS(跨站脚本攻击)
前端·javascript·html
程序员徐师兄41 分钟前
Java基于SpringBoot+Vue框架的宠物寄养系统(V2.0),附源码,文档
java·vue.js·spring boot·毕业设计·宠物寄养系统·宠物寄养
程序员徐师兄44 分钟前
Java基于SpringBoot+Vue的宠物共享平台的设计与实现(附源码,文档)
java·vue.js·spring boot·宠物寄养·宠物共享平台·宠物管理平台
xuelong-ming1 小时前
elementUI input 禁止内容两端存在空格,或者是自动去除两端空格
vue.js