Uniapp 使用自定义字体

技术栈:Uniapp

简介

为了更好的还原UI图片效果,往往需要使用特殊字体,引入字体包。

因实际业务运行平台在微信小程序上,对发布包的项目文件大小有限制,项目中某些比较大的静态资源需要放在服务器上来远程加载,比如图片、字体包。

实现

在onLoad内加载字体包,css中就可以正常使用了。

注意:使用云上的字体包进行加载,会受到网络影响,可能存在字体加载较慢或失败的情况,需要有打底方案。

javascript 复制代码
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {
	uni.loadFontFace({
		// 自定义字体名称
		family: 'FZLanTingYuan-EB-GBK',
		// 自定义字体包资源路径
		source: 'url("https://zj-biz-gov-free-eat.oss-cn-hangzhou.aliyuncs.com/free-eat/static-example/font/FZLanTingYuan-EB-GBK.ttf")',
		success() {
			console.log('success')
		},
		fail() {
			console.log('error')
		}
	});
})
css 复制代码
.fz {
	font-family: 'FZLanTingYuan-EB-GBK';
}
相关推荐
浩星12 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者813 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184121 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的1 天前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app
于慨1 天前
uniapp云托管前端网页
前端·uni-app
y东施效颦1 天前
uni-app 配置华为离线推送流程
前端·vue.js·uni-app
paopaokaka_luck1 天前
基于SpringBoot+Uniapp球场预约小程序(腾讯地图API、Echarts图形化分析、二维码识别)
spring boot·小程序·uni-app
于慨1 天前
uniapp各端通过webview实现互相通信
uni-app
初出茅庐的2 天前
uniapp - AI 聊天页面布局的实现
前端·vue.js·uni-app