字体
字体资源通过 Text 类型的 Element 组件渲染文本。为实体添加 Element 组件,将类型设为 Text,再把字体资源拖到组件的 Font 槽位。
字体以多通道有符号距离场(MSDF)图集存储,而非固定尺寸位图,因此同一资源可在不同字号下保持清晰,每种字形设计只需一份资源。不过,这项技术对不同字体的适用效果有所差异。
导入字体
从编辑器 2.30.0 起,图集在浏览器中生成,不再通过服务器端转换流程。描述文件和图集页会生成为独立资源,可以检查、更改引用,或替换为自行生成的资源。此前导入的字体会在首次重新生成时转换。
将 .ttf、.ttc、.otf 或 .dfont 文件拖入编辑器。浏览器会生成图集,并创建一个以文件命名的文件夹,包含以下四个资源:

| 资源 | 类型 | 说明 |
|---|---|---|
myfont.otf | 源文件(Source) | 上传的字体文件,保留用于重新生成图集,以虚线边框显示。 |
myfont.json | JSON | MSDF 描述文件,保存字形度量和图集布局。 |
myfont.png | 纹理(Texture) | 一个图集页。字符较多时会继续生成 myfont1.png、myfont2.png 等。 |
myfont.otf | 字体(Font) | 字体资源本身,仅引用 JSON 和纹理,不会复制图集数据。 |
源文件与字体资源同名。应赋给 Text 元素的是字体资源,即缩略图中预览了字体样式的那个资源。
首次导入默认包含可打印 ASCII 字符(0x20–0x7E)。可按下述方法添加字符并重新生成。
更改引用,或编辑引用的 JSON/纹理资源时,字体会立即重建,视口文本和资源缩略图也会更新,无需重新加载编辑器。
引擎、React 和 Web Components 项目也可以通过 font-tools 在编辑器之外生成同类资源,该工具使用相同的生成器。
属性

源文件
构建字体所使用的 JSON 描述文件和图集纹理。两者都是普通资源,可以通过资源选择器更改引用,适合使用其他工具生成的图集。
| 属性 | 说明 |
|---|---|
JSON | MSDF 描述文件,更改引用会重建字体。 |
Textures | 图集页,顺序必须与描述文件中的索引一致:第一页在前,然后是第二页,以此类推。 |
手动编辑时请注意两点:
- 页顺序有实际含义。 描述文件按索引引用图集页,顺序错误会渲染出错误字形。选择器只能在末尾追加条目,不能排序,因此顺序错误时,应重新生成字体恢复顺序。
- 不要共享图集纹理。 字体加载时会将其重新配置为适用于 MSDF 采样的设置:禁用 sRGB、禁用 mipmap、使用线性滤波。如果引用其他位置也在使用的纹理,会改变该纹理的渲染效果。
当引用无法构建可用字体时,面板会发出警告,例如未引用任何资源、JSON 不是有效描述文件,或页数与描述文件不一致。引用损坏的字体会显示为空白,而非加载失败,因此需要通过该警告发现问题。
字符预设
单击预设可将其中的字符加入字体。预设会追加到当前字符选择中,而不会替换已有选择。
自定义字符范围
用十六进制输入范围的起点和终点,再单击 + 按钮,即可将该范围追加到字符选择中。
字体
| 属性 | 说明 |
|---|---|
Characters(字符) | 要生成到字体中的字符。如果只需要数字,就不必包含其他字符;字符越少,图集越小。字符必须存在于源字体中才能纳入,不存在的字符会在重新生成后列出。 |
Invert(反转) | 反转生成的图集。修改后需要重新生成。 |
重新生成字体资源
修改字符选择或 Invert 后,单击 REGENERATE FONT ASSETS。生成过程在浏览器中运行,原地重写已有 JSON 和纹理资源,因此引用保持有效,字体 ID 不变,已有文本元素仍可正常使用。新字符集需要更多页时,会创建额外图集页。
如果新字符集需要的页数更少,多余纹理不会自动删除,而是保留在文件夹中,方便继续使用。编辑器会提示当前有多少纹理已无引用,不需要时可以自行删除。
转换编辑器端生成推出前创建的字体
早期导入的字体没有独立 JSON 和纹理资源,因此会显示 CONVERT TO REFERENCED FONT。转换时会生成独立的描述文件与图集资源,并更新字体引用,同时保留原资源 ID 和所有文本分配关系。
转换会替换字体数据及文件,且无法撤销,因此操作前会要求确认:

转换前,字体仍会在 PROPERTIES 面板下显示 Intensity 属性:
| 属性 | 说明 |
|---|---|
Intensity(强度) | 增强从有符号距离场读取的值:0 表示不增强,1 为最大增强。适用于默认设置下边缘不够干净,或以较小字号渲染的情况。 |
具有 JSON 和纹理引用的字体改为从描述文件中读取强度,因此不会显示此面板。