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

相关文章

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Windows Docker端口占用错误及解决方案总结

《WindowsDocker端口占用错误及解决方案总结》在Windows环境下使用Docker容器时,端口占用错误是开发和运维中常见且棘手的问题,本文将深入剖析该问题的成因,介绍如何通过查看端口分配... 目录引言Windows docker 端口占用错误及解决方案汇总端口冲突形成原因解析诊断当前端口情况解

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

jupyter代码块没有运行图标的解决方案

《jupyter代码块没有运行图标的解决方案》:本文主要介绍jupyter代码块没有运行图标的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录jupyter代码块没有运行图标的解决1.找到Jupyter notebook的系统配置文件2.这时候一般会搜索到

在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. 追踪局部变量需求不符合很