记录一下遇到的又一个和TextMeshPro有关的问题。最近在我朋友的帮助下优化游戏的UI。当我按设计稿实现后,他说感觉文字没有居中。
在图中,“伤害”和“攻击目标”所在的文本框内的文字,理应在竖直方向居中。他说感觉我的文字没有居中,好像偏下了一点点。结果我截图之后比较,发现确实中文字的上半部分空白比下半部分多了2个像素。但是很奇怪,我在TMP_Text中已经设置了竖直方向的居中。
这是一个字体基线 (Baseline)的问题,不是你的排版或UI设置的问题。
思源字体(Source Han Sans / Noto Sans CJK)本身的字形设计就是偏下的,它的 字面区域(glyph box)相对字体的 ascender/descender 并不居中。
因此当 TextMeshPro 使用该字体时,即便你把 Alignment 设置为 Middle Center,基线依然是按字体本身的排版信息来定位的 → 就会感觉文字“视觉上偏下”。
正好我用的就是思源字体。所以问题的根本原因其实是在字体上。
以中文为主的 CJK 字体,为了兼容拉丁字符和标点,往往会多留一些头部空间,使排版更平衡,但在 UI 中就会显得字形视觉重心略靠下。
最后我选择了方案2实现,通过修改Descent Line的值后,截图按像素来比较上下部分空余的像素数量,最终让字处于视觉中间的位置。
最后了解一下Ascent Line/ Descent Line这类参数的含义:
评论区
共 条评论热门最新