包含此页的版本:
不含此页的版本:
UI Toolkit 使用 TextCore 来渲染文本,这是一种基于 TextMesh Pro 的技术。TextCore 允许高级样式功能,并且可以在各种点大小和分辨率下清晰地呈现文本。它利用有符号距离场(SDF)字体渲染,可以生成即使在变换和放大时看起来清晰的字体资源。
此示例演示如何在 UI 生成器中设置文本样式、创建和应用静态和动态字体资源、使用富文本标记和自定义样式表设置文本样式,以及创建 UITK 文本设置资源来管理面板的文本设置。
注意:出于演示目的,本指南使用运行时UI。创建字体资源和样式表的说明也适用于编辑器UI。但是,你无法更改当前版本中编辑器UI的默认UITK文本设置。
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前,请熟悉以下内容:
从运行时UI开始,创建一个UITK文本设置资产来管理面板的文本设置。您还可以创建一个Resources文件夹和子文件夹,用于存储字体资源和自定义样式表。
Assets文件夹中,创建一个Resources文件夹。Assets\UI Toolkit文件夹,然后选择创建> UI 工具包>文本设置以创建UITK Text Settings.asset.的“检查器”窗口UITK Text Settings.asset显示字体资源、文本样式表资源、精灵资源和颜色渐变预设的默认路径名称。Resources文件夹,创建两个名为Fonts & Materials和Text Style Sheets.使用 UI Builder 将 Toggle 文本的样式设置为粗体和斜体,并且字体大小为12px.有关详细信息,请参阅使用 USS 设置文本样式。
SimpleRuntimeUi.uxml在 UI Builder 中打开它。创建静态字体资源并将其应用于 Button 控件。对于静态字体资源,无需在构建中包含源字体文件。但是,您必须为按钮显示文本中的所有字符生成图集。显示文本是This is a Button您将在文本中添加 a,因此您生成*TBhinostua*.
从 Google Fonts 下载 Lato 字体包。
解压字体包文件并放置Lato-Regula.ttf在项目的Assets文件夹。
在字体文件的“检查器”窗口中,确认以下内容:
在“项目”窗口中,右键单击Lato-Regula.ttf,然后选择 创建>文本核心(Create Text Core) > SDF >字体资产。这将创建一个名为Lato-Regula SDF.asset.
在“检查器”窗口中,用于Lato-Regula SDF.asset,将 Atlas Population Mode 设置为 静态(Static)。
单击更新图集纹理。
在 字体资源创建器(Font Asset Creator) 窗口中,从 字符集(Character Set) 列表中,选择 自定义字符(Custom Characters)。
在“自定义字符列表”框中,输入TBhinostua*.
单击生成字体图集。
保存您的更改。
地方Lato-Regula SDF.asset在Assets\Resources\Fonts & Materials文件夹。
双击SimpleRuntimeUi.uxml在 UI Builder 中打开它。
在 Button 控件的 Inspector 窗口中,选择 Text > Font Asset > Lato-Regula SDF。
创建动态字体资源并将其应用于TextField 控件TextField 控件向用户显示一段非交互式文本,例如标题、其他 GUI 控件的标签或说明。更多信息
请参阅术语表.对于动态字体资源,必须在构建中包含源字体文件。将源字体文件直接导入到为字体设置的路径。
从 Google Fonts 下载 Roboto 字体包。
解压字体包文件并放置Roboto-Regular.ttf在项目的Assets\Resources\Fonts & Materials文件夹。
在字体文件的“检查器”窗口中,确认以下内容:
右键单击Roboto-Regular.ttf,然后选择 创建>文本核心(Create Text Core) > SDF >字体资产。这将创建一个名为Roboto-Regular SDF.asset.
双击SimpleRuntimeUi.uxml在 UI Builder 中打开它。
在 TextField 控件的 Inspector 窗口中,选择 Roboto-Regular SDF > Text > Font Asset。
使用富文本标记在“标签”控件中设置文本样式。
注意:在当前版本中,TextField 不支持富文本标记。
SimpleRuntimeUi.uxml在 UI Builder 中打开它。This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>.这使得这个词Label大,红色,粗体,两侧都有一个星号。标签文本如下所示视口用户在屏幕上应用的可见区域。
在术语表中查看窗:
要应用相同的样式Label自Button,创建自定义样式表,并将样式应用于这两个单词。
右键单击Assets\Resources\Text Style Sheets文件夹,然后选择创建>文本核心>文本样式表。这会创建一个Text StyleSheet.asset在你在UITK文本设置资产中设置的路径中。
在“检查器”窗口中,用于Text StyleSheet.asset,请执行以下作:
ExampleStyle.<font-weight=700><size=2em><color=#FF0000>*.*</color></size></font-weight>.在“检查器”窗口中,用于UITK Text Settings.asset,从“默认样式表”列表中,选择“文本样式表”。
双击SimpleRuntimeUi.uxml在 UI Builder 中打开它。
在“标签”控件的“检查器”窗口中,将“文本”更改为<s>This is a <style="ExampleStyle">Label</style>.
确保选择“启用富文本”。
在“按钮”控件的“检查器”窗口中,将“文本”更改为<s>This is a <style="ExampleStyle">Button</style>.
确保选择“启用富文本”。
进入播放模式,并在运行时UI中检查文本。
在文本字段中,输入一些随机字符。对于动态字体资源,当您在文本字段中输入文本时,会动态生成字体图集。
在项目的Assets\Resources\Fonts & Materials文件夹中,选择Roboto-Regular SDF.asset.
在“检查器”窗口中,用于Roboto-Regular SDF.asset,选择 更新图集纹理(Update Atlas Texture) 以打开 字体资源创建器(Font Asset Creator) 窗口。如果图集窗口处于隐藏状态,请将其展开。您应该会在地图集窗口中看到您输入的字符。