文字为什么总是不居中!记录一个bug

设计最近换了新的字体包,使用后,垂直情况下总是不居中,改了行高,换语言就不行了,iOS改好了,Android又不行

一、问题

1. iOS 居中,Android 却不居中

原因:测试给的字体垂直度量不一致。 英文字库的 hhea 与 OS/2 typo 两套指标,上下空间分配不同。不同平台取用不同指标,使相同布局下的基线和留白不同,产生视觉偏移。

平台 指标组 原始:上升 / 下降 / 额外行距 修复后
iOS hhea 1050 / -274 / 0 1029 / -295 / 0
Android OS/2 typo 750 / -250 / 324 1029 / -295 / 0

什么是字体垂直度量(Vertical Metrics)?

字体垂直度量决定了文字在垂直方向上的布局空间,主要包含三个指标:

  • Ascent(上升高度) :基线到字体上方的距离。
  • Descent(下降高度) :基线到字体下方的距离。
  • Line Gap(额外行距) :字体建议在行与行之间增加的空间。

2. 中文居中,英文却不居中

原因:字体包的英文、中文、日文字体自然行高不同,固定行高倍率无法通用。

  • Flutter Material 主题有默认行高,未设置不是 Auto, 比如bodyMedium是1.43。
  • 将英文写死行高,虽然英文居中 了,但改变了中文的行框和留白,导致中文又偏移了。

二、解决方式

1. 统一英文字体指标

统一 hhea 与 OS/2 typo 的上升、下降和行间距,并校准基线;保留字形、字宽和总行高。

2. 全局主题默认使用 Auto,适应不同语言

在全局主题中默认设置 height: kTextHeightNone,让各语言使用自身字体的自然行高。它的值 0 表示原生行高,不是零高度。

相关推荐
mmsx2 小时前
Android 并发考古:newThread 与 RxJava 共存,以及 GlobalScope 的三宗罪
android·echarts·rxjava
骑着蜗牛撵大象3272 小时前
大模型 SDK 编译就崩?用 CMakeLists 把 httplib、JSON 与 OpenSSL 装配成可复用的 ChatServer
android·java·c++·http·json·cmake·大模型sdk
老李IT笔记2 小时前
抹除和升系统可以合成一条命令了:强制更新夹在抹除里怎么用,什么情况下不该用
ios·智能手机
海水冷却11 小时前
Android 群组聊天怎么实现:基于 ZIM 的完整落地指南(附可运行 Demo)
android
三少爷的鞋14 小时前
现代 Android 架构指南:不要再主动设计 Callback 接口
android
TimeFine20 小时前
AI 编码工作流的设计
android·ai编程
2601_9498477520 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
骑着蜗牛撵大象32720 小时前
C++20 协程 × 屏障:手写一个 co_await 版 Barrier,让等待不再钉死线程
android·c++20·协程·并发编程·co_await·屏障同步
zhongben123_1 天前
从零开发一个打车APP:技术选型、系统架构与成本评估指南
大数据·运维·ios·系统架构·uni-app·web app