Skip to content

UI 字号与可读性 ​

GameUI 的 FontSize 使用 UI 设计坐标单位,与控件宽高、间距一起按设计画布缩放。它不是操作系统的 point、DIP 或 Android sp,不能把普通 App 的“正文 16”直接当作星火的通用正文大小。

从设置值到屏幕文字 ​

默认横屏设计画布为 1920×1080,竖屏为 1080×1920。Contain 模式下:

text
缩放系数 = min(视口像素宽 / 设计宽, 视口像素高 / 设计高)
屏幕名义字号 = FontSize × 缩放系数

运行时这个系数由 ScreenViewport.Primary.DevicePixelRatio 提供。这里的属性表示游戏设计画布到屏幕像素的比例,不等于浏览器或操作系统的设备密度。

以横屏默认画布为例:

FontSize1920×1080 视口1280×720 视口960×540 视口
1616 px10.7 px8 px
2424 px16 px12 px
2828 px18.7 px14 px
3636 px24 px18 px

表格表示字体的名义尺寸,实际字形和行高还取决于字体、字重与字体度量。系统显示缩放、观看距离和手机屏幕密度也影响可读性;截图像素数不能直接当成 DIP/sp。

选择一组可读字号 ​

先确认项目 GameDataGameUI 的 DesignResolutionWidth、DesignResolutionHeight 和 ScaleMode,再确定主要运行平台和最小目标窗口。以默认横屏画布、主要运行于 1280×720 或更大的桌面游戏窗口为起点:

用途建议设计字号
标题、重要提示36–48
正文、按钮、计分24–28
辅助说明20–24

这些值是排版起点,不是所有游戏的统一默认。960×540 小窗口可能需要更大字号或简化内容;不同设计画布也要重新换算。兼容默认值和 DesignTokens 中的 12–16 不代表推荐正文大小。

移动端应在目标设备上独立检查,不照搬桌面范围。例如将 1080 宽的竖屏画布呈现在约 360 个 App 逻辑单位宽的屏幕上,设计字号 48 才大致对应 16 个 App 逻辑单位;此例依赖实际视口、密度和宽高比,不能只按手机物理分辨率推断。

布局与验收 ​

  • 通过 FontSize 设置设计字号,框架会自动应用全局缩放,不要再乘一次 DevicePixelRatio。
  • 放大文字时一起调整面板宽度、内边距、按钮高度;说明文本优先约束宽度并使用 TextWrap + AutoHeight,允许面板向下增高。
  • TextTrimming.Shrink 适合少量固定尺寸内容,不用它把正文缩到不可读。裁剪和省略号也不能代替正确的宽度约束。
  • 按稳定的项目设计分辨率布局,不要为了修一处小字反复修改全局设计分辨率;它还会影响系统 UI、摇杆和 Canvas。
  • 至少在主要桌面窗口、最小目标窗口和目标移动设备上查看实际画面,并覆盖短文本变成长说明的情况。

Runtime MCP 可用时,结合截图和 ui.snapshot 检查文本、实际矩形,再记录 FontSize、DesignResolution、DevicePixelRatio。FontSize 保持设计值,矩形可能使用屏幕像素;两者应先换到同一坐标系再比较。截图缩小预览时,文字还会随截图再次缩小。

相关文档:流式布局、视口适配、Label 富文本。