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';
}
相关推荐
奎歪歪6 小时前
UniApp页面路由详解
uni-app
小旭@8 小时前
uniapp 微信小程序遇到的坑
微信小程序·uni-app
Rudon滨海渔村8 小时前
[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等
前端·vue.js·uni-app
机构师8 小时前
<uniapp><插件><UTS>在uniapp中,创建自己的插件并发布到uni插件市场
javascript·uni-app·vue·插件·hbuilderx·uni
某公司摸鱼前端8 小时前
uniapp 支付宝小程序自定义 navbar 无效解决方案
小程序·uni-app
寒寒_8 小时前
uni-app 中封装全局音频播放器
uni-app·音视频
艾小逗19 小时前
uniapp中检查版本,提示升级app,安卓下载apk,ios跳转应用商店
android·ios·uni-app·app升级
小旋风0123421 小时前
uniapp自定义头部(兼容微信小程序(胶囊和状态栏),兼容h5)
微信小程序·uni-app·notepad++
耶啵奶膘1 天前
uniapp+vue3表格样式
uni-app
浮桥1 天前
uniapp -- 实现微信小程序、app、H5端视频上传
微信小程序·uni-app·音视频