Unity TextMeshPro 支持的富文本标签及详解

本文转载自知乎:[UGUI图文混排二]TMP支持的富文本(Rich Text)标签 - 知乎

富文本标签(Rich Text Tags)

我们可以使用富文本标签在不修改属性或材质的情况下去改变文本的布局和外观，这些标签的工作方式和HTML或者XML类似，但受到的限制更少。在使用的时候，我们只需要在Text Input输入框中输入对应的标签，如果要关闭富文本标签，取消勾选TextMesh Pro -> Extra Settings -> Rich Text属性即可。

一个简单的标签只有标签的名字。比如<b>是让文本加粗，<u>则是添加下划线。一些标签拥有额外的属性和值，例如<color="red">或<sprite index=3>。标签和它属性的长度加起来不能超过128个字符，但平常使用肯定不会超出这个长度。

下面是一些常见属性类型可以拥有的值

标签的作用域（Scope）和嵌套（Nested）

标签的作用域是用来定义它影响文本的范围，通常情况下添加的标签会影响它之后的所有文本。例如添加颜色标签

<color="red">This text is red

在文本中间添加标签只会影响标签后面的文本

This text turns<color="red"> red

如果在一个文本块中多次使用相同的标签，最后一个标签将取代之前所有相同类型的标签

<color="red">This text goes from red<color="green"> to green

我们还可以使用结束标签限制标签的范围，结束标签只包含一个正斜杠和标签名称，如同</tag>

标签也可以嵌套，这样一个标记的作用域就在另一个标记的作用域内。

<color=red>This text is <color=green>mostly </color>red.

第一个<color>标签的作用域是整个文本块。第二个<color>标签有一个结束标签</color>，因此它的范围被限制为一个单词

支持的标签概述

TMP支持非常多样的富文本标签，可以做出很绚丽的效果。

表格中的内容有些不清楚，接下来实践一遍

Align

每个文本对象都有一个整体的对齐方式，但可以使用<align>标签重写。

通常，将这些标签放在段落的开头，如果一行文本中出现了多个<align>标签，最后一个的效果会覆盖其他的，可以使用</align>结束对齐设置，例如

<align="left"><b>Left-aligned</b>
<align="center"><b>Center-aligned</b>
<align="right"><b>Right-aligned</b>
<align="justified"><b>Justified:</b> stretched to fill the display area (except for the last line)
<align="flush"><b>Flush:</b> stretched to fill the display area (including the last line)

Allcaos, Uppercase, Smallcaps and Lowercase

这些标签是用来更改文本的大小写，其中<lowercase>和<smallcaps>功能相同，都是将文本变为小写，<uppercase> 和<allcaps>都是将文本变为大写。

<lowercase>Alice and Bob watched TV.</lowercase>
<uppercase>Alice and Bob watched TV.</uppercase>
<allcaps>Alice and Bob watched TV.</allcaps>
<smallcaps>Alice and Bob watched TV.</smallcaps>

Alpha

使用<alpha>标签可以改变文本的透明度，需要用十六进制的数为其赋值。

<alpha=#FF>FF <alpha=#CC>CC <alpha=#AA>AA <alpha=#88>88 <alpha=#66>66 <alpha=#44>44 <alpha=#22>22 <alpha=#00>00

Bold and Italic

粗体和斜体可以分别使用<b>和<i>标签定义，Font Asset中定义了渲染时粗体和斜体文字的外观

The <i>quick brown fox</i> jumps over the <b>lazy dog</b>.

Color

使用<color>标签来修改文本颜色的方式有两种，分别是

• 使用颜色名，比如< color="colorName">，它支持的颜色有black, blue, green, orange, purple, red, white和yellow.
• 使用十六进制的数值，比如<color=#FFFFFF> 或者<color=#FFFFFFFF>，分别代表RGBA的值

<color="red">Red <color=#005500>Dark Green <#0000FF>Blue <color=#FF000088>Semitransparent Red

<color="red">Red, <color="blue">Blue,</color> and red again.

CSpace

英文全称为Character Spacing，<cspace>标签用来调整字符的间距，它的值可以是像素或者字体单位（Font units），并且既可以是正数也可以是负数。

<cspace=1em>Spacing</cspace> is just as important as <cspace=-0.5em>timing.

Font

通过<font="fontAssetName">标签可以修改字体，我们还可以使用material属性在同一种字体中切换不同的材质，font和material资源必须放置在 TextMesh Pro -> Resources -> Fonts&Materials文件夹中

Would you like <font="Impact SDF">a different font?</font> or just <font="NotoSans" material="NotoSans Outline">a different material?

Font-weight

如果当前字体支持设置字体粗细，则可以用 <font-weight> 标签进行设置。我们可以使用数值来设定字体粗细值，比如400表示正常，700表示加粗

<font-weight="100">Thin</font-weight>
<font-weight="200">Extra-Light</font-weight>
<font-weight="300">Light</font-weight>
<font-weight="400">Regular</font-weight>
<font-weight="500">Medium</font-weight>
<font-weight="600">Semi-Bold</font-weight>
<font-weight="700">Bold</font-weight>
<font-weight="800">Heavy</font-weight>
<font-weight="900">Black</font-weight>

Gradient

<gradient>标签用来设置文字渐变

Apply<b>
<gradient="Yellow to Orange - Vertical">any
<gradient="Light to Dark Green - Vertical">gradient
<gradient="Blue to Purple - Vertical">preset</gradient>
</b>to your text

当为文字设置渐变时，它会和当前TMP文本的顶点颜色叠加

This <gradient="Light to Dark Green - Vertical">Light to Dark Green gradient</gradient> is tinted by the red vertex color

为了得到纯粹的渐变色，在使用渐变是可以先用 <color>标签将文字变为白色

This <color=#FFFFFFFF><gradient="Light to Dark Green - Vertical">Light to Dark Green gradient</gradient></color> is no longer tinted by the red vertex color

Indent

英文全称Indentation，用来控制文本的水平缩进，并且这也会影响其他行，它的值可以是像素、字体单位和百分比

1. <indent=15%>It is useful for things like bullet points.</indent>
2. <indent=15%>It is handy.

Line-height

<line-height> 标签用来控制行高，它不会改变当前行的位置，而是控制下一行的位置，它的值可以是像素、字体单位和百分比，值越小两行离得越近，值越大离得越远。

Line height at 100%
<line-height=50%>Line height at 50%
<line-height=100%>Rather cozy.
<line-height=150%>Line height at 150%
Such distance!

Line-indent

<line-indent>标签向文本添加水平空白，只有使用换行符或者<br>后的文本会受它的影响，自动换行的文本不受其影响，它的值可以是像素、字体单位和百分比

<line-indent=15%>This is the first line of this text example.
This is the second line of the same text.

Link

我们可以使用 <link="ID">my link</link>来向文本中添加链接，linkID需要是唯一的，以便在用户与文本交互时检索其ID和链接文本内容。

但并不是说每个链接一定要一个唯一的ID，如果有需要，您可以重用ID，例如，当您多次链接到同一个数据的时候，LinkInfo数组只包含每个ID一次。虽然此Link tag允许用户交互，但它不会更改链接文本的外观。还需要使用其他标签配合。

要获得用户交互的链接,请在TMP上挂载一个实现了UnityEngine.EventSystems.IPointerClickHandler接口的脚本,可以在其中拿到用户点击的链接情况

 public void OnPointerClick(PointerEventData eventData)
    {

        var pos = new Vector3(eventData.position.x, eventData.position.y, 0);
        int linkIndex = TMP_TextUtilities.FindIntersectingLink(this._tMPText, pos, eventData.enterEventCamera);
        if (linkIndex > -1)
        {

            Debug.Log("点击" + this._tMPText.textInfo.linkInfo[linkIndex].GetLinkText());
        }

    }

Margin

可以使用<margin>标记增加文本的水平边距。如果我们只想调节左边距或者右边距，可以使用 <margin-left> 或者 <margin-right> 标签。

它的值可以是像素、字体单位和百分比，当它为负数时没有任何意义。

Our margins used to be very wide.
<margin=5em>But those days are long gone.

Mark

向文本添加标记，类似于记号笔，我们需要指定标记的颜色，可以是颜色名称，也可以是十六进制的颜色值。

Text <mark=#ffff00aa>can be marked with</mark> an overlay.

Mspace

英文全称Monospacing，等宽字体，使用<mspace>可以重写字符的间距，让所有的字符拥有同样的水平间距

它的值可以是像素或字体单位

Any font can become <mspace=2.75em>monospace, if you really want it.

Norb

英文全称No Break，使用<nobr>标签让特定的单词放在一起，不会被换行分隔，使用 </nobr> 可以切换到正常模式。

如果<nobr>标签中的字符过多导致超过一行的限制，它还是会被换行展示。

You don't want <nobr>I M P O R T A N T</nobr> things to be broken up.

Noparse

禁止解析，让标签按原始方式展示，TMP不会对其进行解析

Use <noparse><b></noparse> for <b>bold</b> text.

Page

可以使用 <page> 标签在文本中插入分页符，要让它起作用必须将TMP对象的Overflow属性设置为Page。

这时我们可以通过Page后面的数值来展示不同页的内容

Pos

英文全称Horizontal Position，<pos>标签使我们可以直接控制水平插入符号的位置，在水平对齐时效果最好。

它的值可以是像素、字体单位和百分比

at <pos=75%>75%
at <pos=25%>25%
at <pos=50%>50%
at 0%

Rotate

使用<rotate>标签可以让每个字符围绕它的中心旋转，以度为单位指定旋转量，正的值将逆时针旋转字符，负值使它们顺时针旋转。

<rotate>标签会影响字符间的空隙，这可能造成字符重叠，必要的时候使用<cspace>来更改字符间距。

Rotate text <rotate="-10">counter-clockwise</rotate> or <rotate="10">clockwise</rotate>

Rotate text <rotate="45">counter-clockwise</rotate>

上图中的字符明显出现了重叠，我们可以调整它的间距

Rotate text <cspace="15"><rotate="45">counter-clockwise</rotate></cspace>

S、U

我们可以使用 <underline> 标签给文本添加下划线，使用 <strikethrough>标签给文本添加删除线

The <s>quick brown</s> fox jumps over <u>the lazy dog</u>.

Size

Font Size，通过使用 <size> 标签来调整字体的尺寸，它的值可以是像素、字体单位或百分比

像素调整可以是绝对的(5px、10px等)，也可以是相对的(例如+1或-1)，相对大小是基于原始字体大小，所以它们不是渐增（cumulative）的。

<size=100%>Echo <size=80%>Echo <size=60%>Echo <size=40%>Echo <size=20%>Echo

Space

<space> 插入水平偏移量，就像插入了多个空格一样，它的值可以是像素或字体单位。

如果这个标签紧挨着文本，会向文本追加偏移量，从而影响它的换行方式，我们可以在<space> 标签两侧添加一个空格来取消这个影响。

Give me some <space=5em> space.

Sprite

<sprite>标签将Sprite Asset中的图片插入到文本中，Sprite Asset必须位于TMP中的指定文件夹TextMeshPro -> Resources -> Sprite Assets中。

我们可以通过索引<sprite index=1>或名称<sprite name="spriteName">从默认的精灵资产中访问精灵，当通过索引从默认Assets中访问精灵时，也可以使用索引缩写<sprite=1>。 要使用来自不同assets中的sprite，需要先指定sprite所处的asset，再通过索引<sprite="assetName" index=1>或通过名称<sprite="assetName" name="spriteName">访问。

Sprites! <sprite=0> More sprites! <sprite index=3> And even more! <sprite name="Default Sprite Asset_4" color=#55FF55FF>

Style

使用<style>标签应用自定义样式，使用<style>时需要指定style的名称。

<style="Title">Styles</style>
You can create your own.

关于如何创建一个Style参考文档Style Sheets

Sub、Sup

英文全称Subscript和Superscript，可以将文本渲染成上标或者下标。

We have 1m<sup>3</sup> of H<sub>2</sub>O.

VOffset

英文全称Vertical Offset，使用<voffset>标签使文本垂直偏移，这将相应地调整行高以适应文本的偏移位置，行高可以手动调整。偏移量总是相对于原始基线，它的值可以是像素或字体单位。

Up <voffset=1em>up <voffset=2em>UP</voffset> and <voffset=-0.5em>down</voffset> we go again.

Width

<width>标签调整文本水平区域的大小，设置后会立即修改当前行

它的值可以是像素、字体单位或百分比

I remember when we had lots of space for text.
<width=60%>But those days are long gone.

参考

[1] Unity Manual：Rich Text Tags