版本:Unity 6 (6000.0)
语言:英语
使用文本
使用 USS 样式化文本

文本入门

UI 工具包使用 TextCore 渲染文本,这是一项基于 TextMesh Pro 的技术。TextCore 允许高级样式功能,并且可以在各种点大小和分辨率下清晰地渲染文本。它利用了 符号距离场 (SDF) 字体渲染,可以生成即使在转换和放大后也能保持清晰的字体资产。

此示例演示了如何在 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 术语表
Builder 中样式化文本,创建和应用静态和动态字体资产,使用富文本标签和自定义样式表来样式化文本,以及创建面板文本设置资产来管理面板的文本设置。

注意:出于演示目的,本指南使用运行时 UI。创建字体资产和样式表的说明也适用于编辑器 UI。但是,您无法在当前版本中更改编辑器 UI 的默认面板文本设置。

先决条件

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

创建面板文本设置资产

从运行时 UI 开始,并创建一个 面板文本设置资产 来管理面板的文本设置。您还可以创建一个 Resources 文件夹和子文件夹来存储字体资产和自定义样式表。

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

使用 UI Builder 样式化文本

使用 UI Builder 将切换文本样式化,使其为粗体和斜体,并具有 12px 的字体大小。有关更多信息,请参见 使用 USS 样式化文本

  1. 双击 SimpleRuntimeUi.uxml 在 UI Builder 中打开它。
  2. 检查器一个 Unity 窗口,显示有关当前选定游戏对象、资产或项目设置的信息,允许您检查和编辑值。 更多信息
    参见 术语表
    窗口中,为切换控件选择 文本
  3. 字体样式 字段中,选择 BI
  4. 大小 字段中,输入 12

创建静态字体资产

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

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

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

  3. 在字体文件的检查器窗口中,确认以下内容

    • 包含字体数据 已启用。
    • 字符 设置为 动态
  4. 在项目窗口中,右键单击 Lato-Regula.ttf,然后选择 创建 > 文本 > 字体资产。这将创建一个名为 Lato-Regula SDF.asset 的动态字体资产。

  5. Lato-Regula SDF.asset 的检查器窗口中,将 图集填充模式 设置为 静态

  6. 单击 更新图集纹理

  7. 字体资产创建器 窗口中,从 字符集 列表中选择 自定义字符

  8. 自定义字符列表 框中,输入 TBhinostua*

  9. 单击 生成字体图集

  10. 保存您的更改。

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

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

  13. 在按钮控件的检查器窗口中,选择 文本 > 字体资产 > Lato-Regula SDF

创建动态字体资产

创建一个 动态字体资产 并将其应用于 文本字段控件文本字段控件向用户显示一段非交互式文本,例如标题、其他 GUI 控件的标签或说明。 更多信息
参见 术语表
。对于动态字体资产,您必须在构建中包含源字体文件。将源字体文件直接导入到为字体设置的路径中。

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

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

  3. 在字体文件的检查器窗口中,确认以下内容

    • 包含字体数据 已启用
    • 字符 设置为 动态
  4. 右键单击 Roboto-Regular.ttf,然后选择 创建 > 文本 > 字体资产。这将创建一个名为 Roboto-Regular SDF.asset 的动态字体资产。

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

  6. 在文本字段控件的检查器窗口中,选择 文本 > 字体资产 > Roboto-Regular SDF

使用富文本标签样式化

使用 富文本标签 对标签控件中的文本进行样式化。

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

  1. 双击 SimpleRuntimeUi.uxml 在 UI Builder 中打开它。
  2. 在标签控件的 检查器 面板中,将 文本 更改为 This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>。这将使单词 Label 变大,变红,变粗,并在其两侧添加一个星号。
  3. 确保选中 启用富文本

标签文本在 视口用户在屏幕上看到的应用程序区域。
参见 术语表
窗口中显示如下

Label text preview shows the word Label as big, red, and with an asterisk to either side.
标签文本预览显示单词“Label”变大,变红,并在两侧添加一个星号。

使用样式表样式化

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

  1. Assets\Resources\Text Style Sheets 文件夹中右键单击,然后选择 创建 > 文本 > 文本样式表。这将在您在面板文本设置资产中设置的路径中创建一个 Text StyleSheet.asset

  2. Text StyleSheet.asset 的检查器窗口中,执行以下操作

    • 名称 中,输入 ExampleStyle
    • 起始标签 中,输入 <font-weight=700><size=2em><color=#FF0000>*
    • 结束标签 中,输入 *</color></size></font-weight>
  3. UITK 文本设置.asset 的检查器窗口中,从 默认样式表 列表中选择 文本样式表

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

  5. 在标签控件的检查器窗口中,将 文本 更改为 <s>This is a <style="ExampleStyle">Label</style>

  6. 确保选中 启用富文本

  7. 在按钮控件的检查器窗口中,将 文本 更改为 <s>This is a <style="ExampleStyle">Button</style>

  8. 确保选中 启用富文本

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

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

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

  12. Roboto-Regular SDF.asset 的检查器窗口中,选择 更新图集纹理 以打开 字体资产创建器 窗口。如果图集窗口隐藏,请展开它。您应该在图集窗口中看到您输入的字符。

Newly entered characters appear in the font atlas window.
新输入的字符将显示在字体图集窗口中。

其他资源

使用文本
使用 USS 样式化文本