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

本文主要是介绍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

这篇关于uniapp引入第三方字体库如(宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/593002

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

Linux samba共享慢的原因及解决方案

《Linuxsamba共享慢的原因及解决方案》:本文主要介绍Linuxsamba共享慢的原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux samba共享慢原因及解决问题表现原因解决办法总结Linandroidux samba共享慢原因及解决

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

找不到Anaconda prompt终端的原因分析及解决方案

《找不到Anacondaprompt终端的原因分析及解决方案》因为anaconda还没有初始化,在安装anaconda的过程中,有一行是否要添加anaconda到菜单目录中,由于没有勾选,导致没有菜... 目录问题原因问http://www.chinasem.cn题解决安装了 Anaconda 却找不到 An

Spring定时任务只执行一次的原因分析与解决方案

《Spring定时任务只执行一次的原因分析与解决方案》在使用Spring的@Scheduled定时任务时,你是否遇到过任务只执行一次,后续不再触发的情况?这种情况可能由多种原因导致,如未启用调度、线程... 目录1. 问题背景2. Spring定时任务的基本用法3. 为什么定时任务只执行一次?3.1 未启用

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

一文教你Python引入其他文件夹下的.py文件

《一文教你Python引入其他文件夹下的.py文件》这篇文章主要为大家详细介绍了如何在Python中引入其他文件夹里的.py文件,并探讨几种常见的实现方式,有需要的小伙伴可以根据需求进行选择... 目录1. 使用sys.path动态添加路径2. 使用相对导入(适用于包结构)3. 使用pythonPATH环境

java常见报错及解决方案总结

《java常见报错及解决方案总结》:本文主要介绍Java编程中常见错误类型及示例,包括语法错误、空指针异常、数组下标越界、类型转换异常、文件未找到异常、除以零异常、非法线程操作异常、方法未定义异常... 目录1. 语法错误 (Syntax Errors)示例 1:解决方案:2. 空指针异常 (NullPoi

使用DrissionPage控制360浏览器的完美解决方案

《使用DrissionPage控制360浏览器的完美解决方案》在网页自动化领域,经常遇到需要保持登录状态、保留Cookie等场景,今天要分享的方案可以完美解决这个问题:使用DrissionPage直接... 目录完整代码引言为什么要使用已有用户数据?核心代码实现1. 导入必要模块2. 关键配置(重点!)3.

Jackson库进行JSON 序列化时遇到了无限递归(Infinite Recursion)的问题及解决方案

《Jackson库进行JSON序列化时遇到了无限递归(InfiniteRecursion)的问题及解决方案》使用Jackson库进行JSON序列化时遇到了无限递归(InfiniteRecursi... 目录解决方案‌1. 使用 @jsonIgnore 忽略一个方向的引用2. 使用 @JsonManagedR