如何让UI小尺寸文本更清晰？（字号改小后模糊）

问题说明 #

UI测试阶段原本使用Font Size 150、缩放比例(1,1,1)，为缩小文本将Font Size调整为30，同时设置Horizontal overflow为Wrap、Vertical overflow为Truncate，但按钮圆形下方的日期时间文本出现模糊，需要在保持小尺寸的前提下提升文本清晰度。

可行优化方案 #

• 开启文本抗锯齿/子像素渲染：在所用UI框架中启用对应功能，比如Unity的TextMeshPro勾选Enable Kerning和Enable Softness；Web端通过CSS设置-webkit-font-smoothing: subpixel-antialiased或font-smooth: always，强化小字号文本的边缘锐利度。
• 替换为矢量字体：如果当前使用位图字体，换成TTF、OTF这类矢量字体，矢量字体缩放时不会丢失细节，小尺寸下显示更清晰。
• 开启像素对齐：启用像素对齐选项，比如Unity中TextMeshPro的Pixel Perfect，Web端用text-rendering: optimizeLegibility，让文本边缘贴合屏幕像素网格，减少模糊。
• 微调字体大小适配DPI：尝试把Font Size调整为与屏幕DPI匹配的数值（比如32，根据实际分辨率微调），避免非整数倍字号导致的渲染模糊。
• 优化容器布局：检查Vertical overflow为Truncate时是否造成文本偏移或裁剪，适当调整容器内边距，确保文本在容器内完整居中渲染，避免布局挤压引发的模糊。

内容的提问来源于stack exchange，提问作者Daniel Lip