Web使用HarmonyOS字体的压缩方案

本文介绍了HarmonyOS采用的全新字体HarmonyOSSans,以及针对Windows低分辨率屏幕的优化。通过字体压缩工具FontTools,对字体文件进行分段压缩,减少字体加载对网页速度的影响。详细阐述了压缩过程,并给出了使用示例,建议通过unicode-range属性调用相应字体文件以提升用户体验。
摘要由CSDN通过智能技术生成

HarmonyOS 字体

https://developer.harmonyos.com/cn/docs/design/font-0000001157868583

通过研究用户在不同场景下对多终端设备的阅读反馈,综合考量不同设备的尺寸、使用场景等因素,同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求,我们为 HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans(即鸿蒙字体)。

image.png

HarmonyOS 字体效果

通过 BILIBILI(哔哩哔哩)主站的使用效果来看,能明显发现 HarmonyOS 字体在 Windows 低分辨率pixel-ratio < 1.5屏幕上显示更加细腻。

网页加载速度的影响

如果需要全站使用同一种字体,那么我们或许需要同时加载 Regular、Medium、Bold 等不同字重的字体文件,这里给一个参考:
HarmonyOS_Sans_SC_Regular.ttf 文件大小高达 8068KB,注意,这仅仅是 Regular。
所以,如果不对字体文件进行压缩,将其作为 Web 字体是不合理的,这将极大拉缓网页加载速度,严重影响用户体验。

字体压缩

FontTools
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值