uniapp字体

镀孜谔2025-08-05 10:13

在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格式，其他加粗的字体还是使用压缩过的，这样做几乎无感。