Version: Unity 6.0 (6000.0)
语言 : 中文
处理文本
使用 USS 设置文本的样式

文本入门

UI 工具包使用 TextCore 渲染文本,这是一种基于 TextMesh Pro 的技术。TextCore 支持高级样式功能,能够以各种点大小和分辨率清晰渲染文本。它利用了有符号距离场 (SDF) 字体渲染,即使经过变换和放大,也可以生成看起来清晰的字体资产。

此示例将演示如何在__ UI__(即用户界面,User Interface)让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary
Builder 中设置文本样式,创建和应用静态和动态字体资产,使用富文本标签和自定义样式表来设置文本样式,以及创建“用户界面工具包文本设置 (UITK Text Settings)”资产来管理面板的文本设置。

注意:出于演示目的,本指南使用运行时 UI。创建字体资产和样式表的说明也适用于编辑器 UI。但是,无法在当前版本中更改编辑器 UI 的默认“用户界面工具包文本设置 (UITK Text Settings)”。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发者。在开始之前,请熟悉以下内容:

创建“用户界面工具包文本设置“资产

从运行时 UI 开始,然后创建用于管理面板文本设置的“用户界面工具包文本设置 (UITK Text Settings)”资产。您还可以创建一个 Resources 文件夹和子文件夹,用来存储字体资产和自定义样式表。

  1. 按照运行时 UI 入门中的步骤,创建一个简单的运行时 UI。
  2. Assets 文件夹中,创建一个 Resources 文件夹。
  3. 右键单击 Assets\UI Toolkit 文件夹,然后选择创建 (Create) > UI 工具包 (UI Toolkit) > 文本设置 (Text Settings) 以创建UITK Text Settings.assetUITK Text Settings.asset 的检视面板窗口将显示字体资产、文本样式表资产、精灵资产和颜色渐变预设的默认路径名称。
  4. Resources 文件夹中,创建名为 Fonts & MaterialsText Style Sheets 的两个文件夹。

使用 UI Builder 设置文本的样式

使用 UI Builder 将开关 (Toggle) 文本设置为粗体和斜体,并且字体大小为 12px。有关更多信息,请参阅使用 USS 设置文本的样式

  1. 双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。
  2. 在开关控件的检视面板 (Inspector) 窗口中,选择文本 (Text)
  3. 字体样式 (Font Style) 字段中,选择 BI
  4. 大小 (Size) 字段中,输入 12

创建静态字体资产

创建静态字体资产并将其应用于按钮控件。对于静态字体资产,不需要在构建中包含源字体文件。但是,必须为按钮的显示文本中的所有字符生成图集。显示文本为 This is a Button,将在文本中添加 *,因此为 TBhinostua* 生成图集。

  1. 从 Google Fonts 下载 Lato 字体包。

  2. 解压缩字体包文件,将 Lato-Regula.ttf 放在项目的 Assets 文件夹中。

  3. 在字体文件的检视面板 (Inspector) 窗口中,确认以下内容:

    • 启用包括字体数据 (Include Font Data)
    • 字符 (Character) 设置为动态 (Dynamic)
  4. 在项目 (Project) 窗口中,右键单击 Lato-Regula.ttf,然后选择创建 (Create) > 文本核心 (Text Core) > 字体资产 (Font Asset) > SDF。这将创建一个名为 Lato-Regula SDF.asset 的动态字体资产。

  5. Lato-Regula SDF.asset 的检视面板 (Inspector) 窗口中,将图集填充模式 (Atlas Population Mode) 设置为静态 (Static)

  6. 单击更新图集纹理 (Update Atlas Texture)

  7. 字体资产创建工具 (Font Asset Creator) 窗口中的字符集 (Character Set) 列表中,选择自定义字符 (Custom Characters)

  8. 自定义字符列表 (Custom Characters List) 框中,输入 TBhinostua*

  9. 单击生成字体图集 (Generate Font Atlas)

  10. 保存更改。

  11. Lato-Regula SDF.asset 放在 Assets\Resources\Fonts & Materials 文件夹中。

  12. 双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。

  13. 在按钮控件的检视面板 (Inspector) 窗口中,选择文本 (Text) > 字体资产 (Font Asset) > Lato-Regula SDF

创建动态字体资产

创建动态字体资产并将其应用于 TextField 控件。对于动态字体资产,必须在构建中包含源字体文件。将源字体文件直接导入为字体设置的路径。

  1. 从 Google Fonts 下载 Roboto 字体包。

  2. 解压缩字体包文件,将 Roboto-Regular.ttf 放在项目的 Assets\Resources\Fonts & Materials 文件夹中。

  3. 在字体文件的检视面板 (Inspector) 窗口中,确认以下内容:

    • 启用包括字体数据 (Include Font Data)
    • 字符 (Character) 设置为动态 (Dynamic)
  4. 右键单击 Roboto-Regular.ttf,然后选择创建 (Create) > 文本核心 (Text Core) > 字体资产 (Font Asset)。这将创建一个名为 Roboto-Regular SDF.asset 的动态字体资产。

  5. 双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。

  6. 在 TextField 控件的检视面板 (Inspector) 窗口中,选择文本 (Text) > 字体资产 (Font Asset) > Roboto-Regular SDF

使用富文本标签设置样式

使用富文本标签在标签控件中设置文本样式。

注意:在当前版本中,TextField 不支持富文本标签。

  1. 双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。
  2. 在标签控件的检视面板 (Inspector) 面板中,将文本 (Text) 更改为 This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>。这使得单词 Label 变大、变红、变粗,并在一,两侧均带有星号。
  3. 确保选中启用富文本 (Enable Rich Text)

标签文本在视口窗口中如下所示:

标签文本预览将单词“Label”显示为红色大字体,并在两侧均带有星号。
标签文本预览将单词“Label”显示为红色大字体,并在两侧均带有星号。

使用样式表设置样式

要将 Label 的样式应用于 Button,请创建一个自定义样式表,并将该样式应用于这两个单词。

  1. 右键单击 Assets\Resources\Text Style Sheets 文件夹,然后选择创建 (Create) > 文本核心 (Text Core) > 文本样式表 (Text StyleSheet)。这会在“用户界面工具包文本设置 (UITK Text Settings)”资产中设置的路径中创建一个 Text StyleSheet.asset

  2. Text StyleSheet.asset 的检视面板 (Inspector) 窗口中,执行以下操作:

    • 名称 (Name) 中,输入 ExampleStyle
    • 打开标签 (Opening Tags) 中,输入 <font-weight=700><size=2em><color=#FF0000>*
    • 关闭标签 (Close Tags) 中,输入 *</color></size></font-weight>
  3. UITK Text Settings.asset 的检视面板 (Inspector) 窗口中,从默认样式表 (Default Style Sheet) 列表中选择文本样式表 (Text StyleSheet)

  4. 双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。

  5. 在标签控件的检视面板 (Inspector) 窗口中,将文本 (Text) 更改为 <s>This is a <style="ExampleStyle">Label</style>

  6. 确保选中启用富文本 (Enable Rich Text)

  7. 在按钮控件的检视面板 (Inspector) 窗口中,将文本 (Text) 更改为 <s>This is a <style="ExampleStyle">Button</style>

  8. 确保选中启用富文本 (Enable Rich Text)

  9. 进入运行模式并在运行时 UI 中检查文本。

  10. 在文本字段中,输入一些随机字符。对于动态字体资产,字体图集是在文本字段中输入文本时动态生成的。

  11. 在项目的 Assets\Resources\Fonts & Materials 文件夹中,选择 Roboto-Regular SDF.asset

  12. Roboto-Regular SDF.asset 的检视面板 (Inspector) 窗口中,选择更新图集纹理 (Update Atlas Texture) 以打开字体资产创建工具 (Font Asset Creator) 窗口。如果图集窗口被隐藏,请将其展开。您应该会在图集窗口中看到输入的字符。

新输入的字符将显示在字体图集窗口中。
新输入的字符将显示在字体图集窗口中。

其他资源

处理文本
使用 USS 设置文本的样式