Version: 6000.3
语言: 中文
使用文本
使用 USS 设置文本样式

文本入门

UI Toolkit 使用 TextCore 来渲染文本,这是一种基于 TextMesh Pro 的技术。TextCore 允许高级样式功能,并且可以在各种点大小和分辨率下清晰地呈现文本。它利用有符号距离场(SDF)字体渲染,可以生成即使在变换和放大时看起来清晰的字体资源。

此示例演示如何在 UI 生成器中设置文本样式、创建和应用静态和动态字体资源、使用富文本标记和自定义样式表设置文本样式,以及创建 UITK 文本设置资源来管理面板的文本设置。

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

先决条件

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

创建UITK文本设置资源

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

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

使用 UI Builder 设置文本样式

使用 UI Builder 将 Toggle 文本的样式设置为粗体和斜体,并且字体大小为12px.有关详细信息,请参阅使用 USS 设置文本样式

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

创建静态字体资源

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

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

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

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

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

  5. 在“检查器”窗口中,用于Lato-Regula SDF.asset,将 Atlas Population Mode 设置为 静态(Static)。

  6. 单击更新图集纹理

  7. 字体资源创建器(Font Asset Creator) 窗口中,从 字符集(Character Set) 列表中,选择 自定义字符(Custom Characters)。

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

  9. 单击生成字体图集

  10. 保存您的更改。

  11. 地方Lato-Regula SDF.assetAssets\Resources\Fonts & Materials文件夹。

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

  13. 在 Button 控件的 Inspector 窗口中,选择 Text > Font Asset > Lato-Regula SDF

创建动态字体资源

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

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

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

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

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

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

  6. 在 TextField 控件的 Inspector 窗口中,选择 Roboto-Regular SDF > Text > Font Asset

使用富文本标记设置样式

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

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

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

标签文本如下所示视口用户在屏幕上应用的可见区域。
术语表中查看
窗:

标签文本预览将“标签”一词显示为大、红色,两侧都有星号。
标签文本预览将单词“标签”显示为大、红色,两侧都有星号。

使用样式表设置样式

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

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

  2. 在“检查器”窗口中,用于Text StyleSheet.asset,请执行以下作:

    • 名称中,输入ExampleStyle.
    • “开始标记”中,输入<font-weight=700><size=2em><color=#FF0000>*.
    • “结束标记”中,输入*</color></size></font-weight>.
  3. 在“检查器”窗口中,用于UITK Text Settings.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,选择 更新图集纹理(Update Atlas Texture) 以打开 字体资源创建器(Font Asset Creator) 窗口。如果图集窗口处于隐藏状态,请将其展开。您应该会在地图集窗口中看到您输入的字符。

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

其他资源

使用文本
使用 USS 设置文本样式