uniapp引入第三方字体库如(宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案

最近在开发一个写对联的小程序,其中要求对联文字以不同字体呈现,比如(宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等),如图:
在这里插入图片描述
一般UI设计给的都是这种.tff格式的字体文件,如图:
在这里插入图片描述
那么怎么在uniapp中加载第三方字体库呢?

经过几天的研究,找到了最优的一个解决方案:

API uni.loadFontFace() + 远程加载.tff字体文件(微信小程序发布的代码主包压缩后不能超过2M,所以将这些静态资源放到服务器上是一个很好的节省容量的方法)

API uni.loadFontFace()的使用:

uni.loadFontFace({family: '中英文都可',source: `url('${domain}/xxx/xxx.ttf')`,success() {console.log('success')},fail(res) {console.log('fail',res)}
})

使用该api的注意事项
在这里插入图片描述
跨域问题解决:

Header("Access-Control-Allow-Origin: *");
Header("content-type: font/ttf");

代码示例:

  1. 在uniapp目录下的utils下新建一个font.js文件
    在这里插入图片描述
    font.js内容如下
// 第三方字体库调用
let loadFont = function() {// 所有的.tff文件const fontsArr = ['Xiquegufengxiaokaiti','Xiquejuzhengti','Xiqueledunti','Xiquexiaoqingsongti','Xiqueyanshuti','Zixiaohunfeimoshoushu','Zixiaohungeyixiaoshoujixinkaiti','Zixiaohunqiankunshoushu','Zixiaohunxingchaohaibaoti',]fontsArr.forEach(itm => {wx.loadFontFace({family: `${itm}`, //设置一个font-family使用的名字 中文或英文global: true, //是否全局生效source: `url("https://xxxxx.xxx.com/ttf/${itm}.ttf")`, //字体资源的地址success: function(e) {console.log(itm, '===>字体调用成功');},fail: function(e) {console.log(itm, '===>字体调用失败');},});})
};
module.exports = {loadFont: loadFont,
};
  1. 在main.js中全局引入
// 第三方字体库调用
const font = require('./utils/fonts/font.js')
font.loadFont(); //下载字体
  1. 页面中使用
    在这里插入图片描述
<template><view class="mine"><view class="f-s40"> 谁念西风独自凉 </view><view class="Xiquegufengxiaokaiti"> 谁念西风独自凉 </view><view class="Xiquejuzhengti"> 谁念西风独自凉 </view><view class="Xiqueledunti"> 谁念西风独自凉 </view><view class="Xiquexiaoqingsongti"> 谁念西风独自凉 </view><view class="Xiqueyanshuti"> 谁念西风独自凉 </view><view class="Zixiaohunfeimoshoushu"> 谁念西风独自凉 </view><view class="Zixiaohungeyixiaoshoujixinkaiti"> 谁念西风独自凉 </view><view class="Zixiaohunqiankunshoushu"> 谁念西风独自凉 </view><view class="Zixiaohunxingchaohaibaoti"> 谁念西风独自凉 </view></view>
</template><script>export default {data() {return {};},methods: {initData() {},},onShow() {this.initData();},created() {},};
</script><style scoped lang="less">.mine{line-height: 100rpx;font-size: 80rpx;text-align: center;}.Xiquegufengxiaokaiti {font-family: Xiquegufengxiaokaiti;}.Xiquejuzhengti {font-family: Xiquejuzhengti;}.Xiqueledunti {font-family: Xiqueledunti;}.Xiquexiaoqingsongti {font-family: Xiquexiaoqingsongti;}.Xiqueyanshuti {font-family: Xiqueyanshuti;}.Zixiaohunfeimoshoushu {font-family: Zixiaohunfeimoshoushu;}.Zixiaohungeyixiaoshoujixinkaiti {font-family: Zixiaohungeyixiaoshoujixinkaiti;}.Zixiaohunqiankunshoushu {font-family: Zixiaohunqiankunshoushu;}.Zixiaohunxingchaohaibaoti {font-family: Zixiaohunxingchaohaibaoti;}
</style>

参考链接: https://www.cnblogs.com/mengsha/p/14039401.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/613434.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

猫咪主食冻干真的对猫好吗?最热门的三款主食冻干对比测评

随着对猫咪主食健康和营养问题的关注度提高&#xff0c;越来越多的铲屎官开始重视科学养猫。 主食冻干因其模拟猫咪原始捕猎猎物模型配比、低温加工的特点&#xff0c;被认为是最符合猫咪饮食天性的选择。 相比传统的膨化猫粮&#xff0c;主食冻干中的淀粉和碳水化合物添加较…

如何删除mysql-bin

“删除mysql-bin”,用于记录一下后面还会用到. 删除mysql-bin的方法&#xff1a; 1、通过“mysql> reset master;reset slave;”命令删除“mysql-bin”文件&#xff1b;2、删除“my.cnf”中的“log-binmysql-bin”一行即可。 默认情况下mysql会一直保留mysql-bin文件&…

QT基础篇(2)QT5模板库,工具类及控件

1.字符串类 QT中的字符串类包括以下几种&#xff1a; QString类&#xff1a;是Qt中最常用的字符串类&#xff0c;用来存储Unicode字符。它支持各种字符串操作&#xff0c;例如连接、替换、截取等。 QByteArray类&#xff1a;用来存储字节序列&#xff0c;适用于处理非Unicode…

计算机网络 物理层

文章目录 物理层物理层的基本概念数据通信的基础知识数据通信系统的模型有关信道的几个基本概念信道的极限容量 物理层下面的传输媒体导引型传输媒体非引导型传输媒体 信道复用技术波分复用码的复用 宽带接入技术ADSL 技术光纤同轴混合网 (HFC 网&#xff09;FTTx 技术 物理层 …

爬虫01-爬虫原理以及爬虫前期准备工作

文章目录 1 爬虫基本原理什么是爬虫爬虫功能详解爬虫基本流程两个概念&#xff1a;request和response 2 一些问题爬虫能抓取什么样的数据&#xff1f;抓取的数据怎么提取部分内容&#xff1f;数据解析方式。为什么我爬虫抓取的数据和浏览器看到的不一样怎样解决JavaScript渲染的…

阿里云弹性计算技术公开课-ECS 安全季 全新上线!

云布道师 如何保障云上业务的应用安全和数据安全&#xff0c;是每一个上云的企业和用户关注的重点。云上安全建设是一个体系化工程&#xff0c;需要用户主动进行多方面的考虑和实施&#xff0c;包括制定完善的安全策略和规范&#xff0c;如身份认证、访问控制、漏洞管理、安全…

超实用的公众号内容制作流程,小白也能轻松学会

公众号是以内容为王的平台&#xff0c;保持优质原创内容发布可以给公众号带来源源不断的流量&#xff0c;稳定输出内容&#xff0c;会获得平台的流量扶持。 很多小伙伴运营公众号都没有什么阅读量&#xff0c;一方面是公众号内容同质化越来越严重&#xff0c;另外一方面是公众…

编程笔记 html5cssjs 030 HTML音频

编程笔记 html5&css&js 030 HTML音频 一、<audio>元素二、属性三、事件三、使用 CSS 设置样式练习小结 有时候网页上也需要嵌入音频。比如播放歌曲或老师讲课的音频等。 一、<audio>元素 <audio> HTML 元素用于在文档中嵌入音频内容。<audio>…

寒假刷题第四天

PTA甲级 1017 Queueing at Bank 可以使用小顶堆模拟窗口的情况&#xff0c;一定是最小的时间的窗口先空出来 #include<iostream> #include<algorithm> #include<queue> #include<vector>using namespace std;struct people {int time;int process; …

完全卸载grafana

查看要卸载的包的名字 yum list installed yum remove grafana-enterprise.x86_64 成功

【tensorflowflutterweb】机器学习模型怎样用到前端上(未写完)

书接上回 在上一章 我们谈了怎么根据项目需求构建一个简单的机器学习模型。 ​​​​​​ ​​​​​​【tensorflow&flutter】自己写个机器学习模型用在项目上&#xff1f;-CSDN博客文章浏览阅读852次&#xff0c;点赞22次&#xff0c;收藏15次。【tensorflow&flutter…

【2023 - 探索】博0到博1,游戏新地图的探索日志

【2023 - 探索】博0到博1&#xff0c;游戏新地图的探索日志 写在最前面CSDN探索日志2023的探险 探索日志年终回顾探索 冒险回顾实习6月开始跟着老师做科研年中的一些其他事情9月开始上课开学后11月&#xff0c;读者互动 新年展望新年祝福 写在最前面 2023&#xff0c;我解锁了新…

C语言——结构体类型(二)【结构体内存对齐,结构体数组】

&#x1f4dd;前言&#xff1a; 上一讲结构体类型&#xff08;一&#xff09;中&#xff0c;我们讲述了有关结构体定义&#xff0c;创建&#xff0c;初始化和引用的内容&#xff0c;这一讲&#xff0c;我们进一步学习结构体的相关知识&#xff1a; 1&#xff0c;结构体内存对齐…

腾讯云2024年优惠券领取入口汇总

腾讯云是国内知名的云计算服务提供商&#xff0c;提供了包括云服务器、云数据库、云存储、人工智能等全方位的云服务。为了吸引更多的用户&#xff0c;腾讯云经常会推出各种优惠券&#xff0c;让用户在购买云服务时能够享受到更多的优惠&#xff0c;下面给大家整理汇总最新腾讯…

独享静态代理IP在海外市场调研中的独特优势

独享静态代理IP在海外市场调研中扮演着至关重要的角色&#xff0c;提供了一系列无可比拟的优势。独享静态代理IP的稳定性和可靠性对于长期的市场调研至关重要&#xff0c;它保证了连接的持续性和数据的准确性。通过这些方面的综合优势&#xff0c;独享静态代理IP成为海外市场调…

【华为OD机试真题2023CD卷 JAVAJS】矩阵匹配

华为OD2023(C&D卷)机试题库全覆盖,刷题指南点这里 矩阵匹配 知识点二分查找DFS搜索 时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 从一个N*M(N<=M)的矩阵中选出N个数,任意两个数字不能在同一行或同一列,求选出来的N个数中第K大的数字的最小值是多少。…

每日一看大模型新闻(2023.11.20)

1.产品发布 1.1长虹&#xff1a;首个基于大模型的智慧家电AI平台 发布日期&#xff1a;2023.11.20 全球首个基于大模型智慧家电AI平台长虹云帆震撼发布&#xff01; 主要内容&#xff1a;长虹智慧AI平台发布会上&#xff0c;发布了全球首个基于大模型的智慧家电AI平台——长…

靜態住宅IP代理詳解(ISP代理)

IP地址如同我們的網路身份證&#xff0c;是我們在互聯網世界中的標識。而在這個廣闊的網路世界中&#xff0c;有一種特殊的IP地址——靜態住宅IP&#xff0c;它就像我們的網路“定居地”。 靜態住宅IP是什麼&#xff1f; 靜態住宅IP&#xff0c;顧名思義&#xff0c;是一種固定…

使用Rider C# Dll工程和Unity工程互相调用、断点方法

总体流程 创建C# Dll工程&#xff0c;生成C#工程Dll 创建Unity工程 Unity调用C#工程的代码 C#工程调用Unity工程的代码 断点方法 创建C# Dll工程&#xff0c;生成C#工程Dll 创建工程 选这个&#xff0c;注意UnityEngineDll这个选项&#xff0c;要选你目标unity版本的Dll…

R语言生物群落(生态)数据统计分析与绘图教程

详情点击链接&#xff1a;R语言生物群落&#xff08;生态&#xff09;数据统计分析与绘图教程 前沿 R 语言作的开源、自由、免费等特点使其广泛应用于生物群落数据统计分析。生物群落数据多样而复杂&#xff0c;涉及众多统计分析方法。 一&#xff1a;R和Rstudio及入门和作…