这是一份为您整理好的博客文章草稿。内容结构经过了优化，更加适合阅读和检索，您可以直接复制到您的博客中使用。

Unity TextMeshPro 图文混排实用指南：解决 Sprite 偏移、缩放与间距问题

在 Unity 的 UI 开发中，使用 TextMeshPro (TMP) 的富文本标签 <sprite=n> 来实现图文混排是非常常见的需求。但在实际使用中，经常会遇到图片与文字基线不对齐、大小不合适或左右间距太挤等问题。

本文总结了在 TMP 中调整 Sprite 图片排版的常用技巧，希望能帮大家少走弯路。

一、 图片上下错位（垂直偏移）怎么办？

当使用 <sprite=0> 时，图片经常会显得偏上或偏下。这是因为 Sprite Asset 的基线（Baseline）或度量值（Metrics）默认没有与当前字体匹配。

方法 1：修改 Sprite Asset 属性（推荐，一劳永逸）

如果你会在多个地方使用这个图标，强烈建议直接修改资源属性：

  1. 在 Project 窗口选中你的 Sprite Asset。
  2. 在 Inspector 面板中展开 Sprite Glyph Table（精灵字形表）。
  3. 找到对应的图片 Index（比如 0）。
  4. 微调 BY (Bearing Y) 的值：
  • 图片偏上：把 BY 调小（支持负数）。
  • 图片偏下：把 BY 调大。
  1. (可选) 如果图片和后面的文字重叠，可以调大 AD (Advance) 的值来增加它占据的水平宽度。

方法 2：修改全局偏移（适用于整套图集偏离）

如果整张图集里的所有图标都有同样程度的偏移，可以在 Sprite Asset 的顶部找到 Global Settings，统一调整 Default Y Offset。

方法 3：使用富文本标签 <voffset>（适合局部快速微调）

如果只是临时在一个句子中需要特殊对齐，可以直接在文本中使用 <voffset> 标签：

这是一段文字 <voffset=-0.25em><sprite=0></voffset> 对齐了。

(注：支持正负值，单位可以是 em 或 px)

二、 如何改变图片的大小？

调整 <sprite> 大小同样有“修改资源”和“富文本控制”两种思路。

方法 1：使用 <size> 标签（最快捷、灵活）

在做动态自适应的 UI（如装备 Tips、聊天气泡）时，直接用百分比缩放最稳妥，不会破坏排版：

攻击力 <size=150%><sprite=0></size> +10

(也可以使用绝对像素值，如 <size=40>)

方法 2：修改单个 Sprite 的 Scale（长效管理）

如果希望某个图标默认就比较大：

  1. 选中 Sprite Asset -> 展开 Sprite Character Table 或 Sprite Glyph Table。
  2. 找到对应图标，修改其专属的 Scale 值（如改为 1.5 即放大 1.5 倍）。

方法 3：修改全局 Scale（整套图集缩放）

在 Sprite Asset 的 Global Settings 中调整 Default Scale，让整个图集内的图标统一缩放。

三、 图片左右间距不协调（水平偏移）怎么办？

TextMeshPro 虽然没有直接叫 <hoffset> 的标签，但我们可以用以下几个标签完美实现水平控制。

1. 使用 <space> 标签相对偏移（支持负值！）

这是调整图文左右间距最常用的方法，在图标前后硬塞入一段距离。给负值可以把图标向回拉，甚至能做出图文重叠的效果：

向右推开：<space=1em><sprite=0>
向左拉回：<space=-10px><sprite=0>

2. 使用 <pos> 标签绝对定位

如果是做属性列表，希望不管前面的文字有多长，图标都对齐在固定的位置，使用 <pos> 标签：

力量 <pos=50%><sprite=0>   <!-- 强行对齐在一行 50% 的位置 -->
攻击速度 <pos=150px><sprite=0> <!-- 固定在距离行首 150 像素的位置 -->

💡 总结与建议

  • 频繁复用的图标：花点时间在 Sprite Asset 面板里把 Scale 和 BY 调准，一劳永逸。
  • 一次性的排版需求：灵活组合 <size>、<voffset> 和 <space> 标签，可以实现任何你想要的混排效果。注意，如果大幅度改变了图标的 Size，它的垂直中心点可能会发生变化，此时结合 <voffset> 微调即可。