uniapp字体

在uniapp开发中遇到了很多关于字体的坑,记录一下。

app中字重的问题

在使用font-weight时安卓端只支持normal(400)bold(700),iosiOS 支持 9 种 uniapp.dcloud.net.cn/tutorial/nv... 所以导致了在安卓手机上,字重不够细腻。

解决方法:

css 复制代码
@font-face {
	font-family: 'hmRegular';
	src: url('/static/font/hm/HarmonyOS_Sans_SC_Regular.ttf');
}
@font-face {
	font-family: 'hmMedium';
	src: url('/static/font/hm/HarmonyOS_Sans_SC_Medium.ttf');
}
@font-face {
	font-family: 'hmBold';
	src: url('/static/font/hm/HarmonyOS_Sans_SC_Bold.ttf');
}

以鸿蒙字体为例,引入不同字重的字体,只用font-family来控制字体的粗细,不使用字重。

动态加载字体

uniapp.dcloud.net.cn/api/ui/font... 看起来好像没什么问题,但需要仔细看他们的tips(引入中文字体,体积过大时会发生错误,建议抽离出部分中文,减少体积,或者用图片替代)

没错,果然没这么容易,发生了错误,引用了9M的文件。

字体加载缓慢的问题

因为使用了3个9M的文件,想让文件小一点,就用工具压缩成其他格式,但是在真机体验时发现了问题,页面在打开时,好几秒都是白屏的(这些被压缩的字体需要先解压)。

解决方法:普通的字体使用ttf格式,其他加粗的字体还是使用压缩过的,这样做几乎无感。

相关推荐
井柏然8 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒9 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
井柏然9 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊10 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang10 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..10 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询10 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
Roadinforest11 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
银嘟嘟左卫门11 小时前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端
右子11 小时前
HTML Canvas API 技术简述与关系性指南
前端·javascript·canvas