多端字体规范适配

背景

安心筑组件库 v2.0 版本的字体规范在使用时有许多不便，主要有以下几点：

问题	说明
主字体过小	14px 对工人、班组长等用户群体可读性不足
行高设置不合理	排版时视觉比例失衡
字体层级不明确	可选项过多，使用无规律，全平台规范难以统一
三端底层逻辑不清	适配规则无据可依，优化难以推进

针对以上问题，本文从行高原理解释展开，逐端推导适配规则。

行高的定义

行高指文字外边框的整体高度：上下空隙为半行距，行高通常大于字高，如 14px 文字的行高为 22。

常见 UI 设计中定义字体高度一般有两种方式：一种是用字体乘一个固定的倍数，另一种是给不同的字体尺寸设置固定高度。两种方式都能通过配套的间距规则保证阅读舒适性。

固定倍数行高

将 Line Height 设为字号的固定百分比，优点是全尺寸统一适配。问题在于行高随字号线性放大——标题越大，段落视觉间距越失衡。

固定高度行高

让行高尽量贴近字高，但取值依赖设计师的主观判断，缺乏统一规律。

Ant Design 从「自然律」出发给出了解法：行高与字号之差恒为 8。其设计逻辑值得借鉴——行高随字号增长而增速放缓，且增幅不超过 1 倍。但这套规则主要用于 Web 端，移动端段落排版仍需单独设置行高。

三端适配规则

Web/h5

Web 以像素为单位，字号不受分辨率影响，精准可控，因此普遍采用固定高度。

iOS

iOS 全端字体统一、分辨率规律（以当时主流机型为准），按 1 倍图设计即可覆盖所有终端。

Android

Android 机型碎片化严重，各厂商分辨率与默认字体差异大。系统以 dp（设备独立像素）适配、不依赖像素，且官方无「行高」概念（使用 Type Scale）；行高限制在部分机型的默认实现下小于 28 不生效。仅有 lineSpacingExtra / lineSpacingMultiplier 可用，但不支持多行、跨机型兼容性差。因此 Android 暂不做强制字体行高适配（思源黑体可适配，华为 UI、小米 UI、OPPO UI 等较难覆盖）。

最终方案

综合三端底层逻辑，确定以下优化方向，尽可能保证表现一致：

端	定义方式	主字体	高度规则	基准分辨率
iOS	固定高度	14px → 15px	行高 − 字号 = 7	390×844
Android	自适应行高；设计稿统一，开发按最小屏适配	14px → 15px	暂不强制	390×844
Web/h5	固定高度	保持 14px	行高 − 字号 = 7	1440×820

方案落地后，三端字体规范统一为一套推导标准，设计走查中字体大小、行高不一致的问题明显减少，研发按规则实现即可对齐设计稿，字体相关的还原度沟通成本显著降低。

限制说明：本方案适用于中文场景，西文因基线体系不同暂不覆盖（规范预留英文接口）；英文与数字沿用苹方 / 思源黑体默认方案；DIN 等特殊数字字体需统一并重编辑后使用，规避版权风险。

参考资料

文章

• 8000 字干货！超全面的 UI 字体排版设计指南
• Ant Design 3.0 背后的故事（附演讲视频）
• 如何正确设置 Android 的行高？
• Material Design 2: Typography
• Material Design 3: Typography
• Apple Design: Typography