如今，单一文本样式已经很难满足实际项目需求，我们常会需要设置特殊的文本样式、优化排版、进行图文混排等等。此时，少不了用到富文本功能，实现更加丰富多样的文本效果。

开发者 wingcd 历时半年，写了一款开箱即用的 SDF 富文本插件，支持 Cocos Creator 3.x，能够几乎无开销地实现各种富文本功能，可以通过 TTF 生成 SDF 字体，支持动态与静态方式生成 SDF 字体。

功能介绍

可合批功能

不可合批功能

支持预生成 SDF 字体文件。支持动态生成 SDF 字体。更少的纹理占用，支持一张图的四个通道同时存储文字。支持 html 富文本格式。支持图文混排。

支持自定义预制体插入。支持动态设置文字位置。自带多种文字效果。

更快的打字机实现方式。支持 3D 文字 Label。

使用方法

下载插件。点击菜单：扩展/Text Mesh/安装示例，安装 Demo 示例（需要重启 Cocos 项目）。生成字体。点击菜单：扩展/Text Mesh/Label，添加富文本字体。使用预生成的字体文件不要使用默认字体，默认字体为只包含几个字的静态字体。调整字体各个参数，实现自己需要的效果。

生成字体

点击菜单：扩展/Text Mesh/创建字体资源，打开字体资源创建窗口：

设置字体参数。点击生成字体图集，会提示你选择新建字体的目录，或者直接更新原有字体。当生成成功后会在选择目录下生成两个文件（*.tmf.bin，*.tmf.png)，选择 bin 文字将会在检视图中看到相关字体信息，并可在图集信息中查询生成文字所在位置。

使用文本

选择需要创建文本的父节点，点击菜单：扩展/Text Mesh/Label，将会在选择节点下创建一个文本节点。选择文本节点，在检视图中替换掉默认字体（默认字体为静态字体，且只包含几个字）。

调整更多的参数获得自己想要的效果，详细可以参考附带的 Demo。

富文本标签

参考源码 StyleMappler.ts。标签参数的优先级高于组件设置的参数。

预定义样式

可以通过 StyleManager 添加自定义样式，Demo 示例中的 TMFStyle.ts 展示了使用方法。

使用样式：

其他

自带投影范围较小，如果有远距离投影，可以直接通过两个文本叠加实现，不影响合批。富文本标签优先级高于标签自带属性。不要将字体图片加入纹理集中。

资源链接

插件下载：https://store.cocos.com/app/detail/4372论坛专贴：https://forum.cocos.org/t/topic/143915