如何让嗒啦啦实现 160+ 文本角色的实时字体编辑系统？

04/10221 浏览开发交流

作者：浠涫的攻略姬-

分类：#TapTap制造 #开发心得 #嗒啦啦 #字体

## 为什么需要字体系统？

在游戏开发中，字体的选择和使用是一个看似简单却非常重要的问题。很多开发者可能会问：不就是用默认字体吗？为什么还要搞那么复杂的字体系统？

让我结合《节拍前夜》的实际开发经历，来聊聊这个话题。

### 问题背景

说起来都是泪，我们一开始也觉得"不就是用默认字体吗？"

最初项目用的是 TapTap Maker 引擎内置的 **MiSans**：- ✅ 技术上很完美：支持中英文混排、自带 Emoji Fallback 机制- ❌ 视觉上一言难尽：配上蓝底白字，活脱脱一个"雷霆 UI"

后来我们换成了阿里巴巴普惠体，但依然有这些痛点：

1. **视觉表现力不足**：标题、正文、数字用同样的字体，缺乏层次感2. **与游戏主题不符**：音乐节奏游戏用一个普普通通的字体，缺少音乐感3. **调整字体麻烦**：设计师觉得某个文本字体不合适，要程序员改代码、重新编译4. **无法快速迭代**：不同屏幕、不同文本角色的字体需要反复试错，效率很低

### 解决方案

我们最终决定做一套完整的字体系统：

1. **8 个字体族覆盖游戏场景**：正文、标题、趣味、叙事、正式等不同需求2. **160+ 文本角色统一管理**：每个按钮、标题、标签都有自己的字体角色3. **游戏内实时编辑器**：设计师在游戏运行中就能改字体，立即看到效果4. **云端同步保存**：修改后自动保存，多设备同步

## 选定的 8 个字体族

我们从 29 个备选字体（加嗒啦啦搜索）中精选了 8 个（可以让嗒啦啦构建一个界面给你预览），覆盖游戏常见的排版需求：

| 字族名 | 字体文件 | 中文名 | 用途 | 大小 ||--------|---------|--------|------|------|| **sans** | AlibabaPuHuiTi-Regular.ttf | 阿里巴巴普惠体 | 通用正文 | 838K || **heiti** | SourceHanSansSC-Regular.ttf | 思源黑体 | 强调正文 | 1.9MB || **display** | SmileySans-Oblique.ttf | 得意黑 | 展示/标题 | 2.6MB || **impact** | YouSheBiaoTiHei.ttf | 优设标题黑 | 冲击力标题 | 1.4MB || **fun** | ZhanKuKuaiLeTi.ttf | 站酷快乐体 | 趣味文本 | 5.4MB || **wenkai** | LXGWWenKai-Regular.ttf | 霞鹜文楷 | 文学/叙事 | 19MB || **serif** | SourceHanSerifSC-Regular.otf | 思源宋体 | 正式文本 | 12MB || **fangsong** | ZhuqueFangsong-Regular.ttf | 朱雀仿宋 | 仿宋文本 | 8.5MB |

### 为什么选这 8 个？

**实战经验分享**（虽然我们字体系统还不够完美，但这些选择逻辑是通用的）：

1. **正文用普惠体**：免费、开源、易读，覆盖 90% 的通用文本场景2. **标题用得意黑**：斜体设计，有音乐感，适合音乐游戏3. **数字用标题黑**：粗体、醒目，Combo、伤害数字一眼就能看见4. **叙事用文楷**：文学感强，战斗日志、事件文本看起来像小说5. **趣味用快乐体**：活泼可爱，偶尔用在奖励、彩蛋等场景6. **正式用宋体/仿宋**：图鉴、说明等需要严肃感的地方

## 怎么在 TapTap Maker 中注册字体？

作为萌新开发者，你不需要自己手动下载字体文件，直接让嗒啦啦（AI）帮你搞定！

### 第一步：让嗒啦啦帮你下载字体

在对话框里直接说：

```嗒啦啦，帮我下载以下字体到项目的 assets/Fonts/ 文件夹：（嗒啦啦帮我搜索有什么字体可以用）1. 阿里巴巴普惠体 (AlibabaPuHuiTi-Regular.ttf)2. 思源黑体 (SourceHanSansSC-Regular.ttf)3. 得意黑 (SmileySans-Oblique.ttf)4. 优设标题黑 (YouSheBiaoTiHei.ttf)5. 站酷快乐体 (ZhanKuKuaiLeTi.ttf)6. 霞鹜文楷 (LXGWWenKai-Regular.ttf)7. 思源宋体 (SourceHanSerifSC-Regular.otf)8. 朱雀仿宋 (ZhuqueFangsong-Regular.ttf)```

### 第二步：让嗒啦啦帮你修改 main.lua

然后说：

```嗒啦啦，帮我在 main.lua 中注册这 8 个字体族，添加到 UI.Init 的 fonts 配置里```

嗒啦啦会自动帮你生成类似这样的代码：

```luaUI.Init({ fonts = { { family = "sans", weights = { normal = "Fonts/AlibabaPuHuiTi-Regular.ttf", } }, { family = "heiti", weights = { normal = "Fonts/SourceHanSansSC-Regular.ttf", } }, { family = "display", weights = { normal = "Fonts/SmileySans-Oblique.ttf", } }, { family = "impact", weights = { normal = "Fonts/YouSheBiaoTiHei.ttf", } }, { family = "fun", weights = { normal = "Fonts/ZhanKuKuaiLeTi.ttf", } }, { family = "wenkai", weights = { normal = "Fonts/LXGWWenKai-Regular.ttf", } }, { family = "serif", weights = { normal = "Fonts/SourceHanSerifSC-Regular.otf", } }, { family = "fangsong", weights = { normal = "Fonts/ZhuqueFangsong-Regular.ttf", } }, }, designSize = 1080,})```

### 第三步：让嗒啦啦帮你创建 FontStyleConfig 模块

接着说：

```嗒啦啦，帮我创建一个 FontStyleConfig 模块，用于管理游戏中的文本角色字体配置```

嗒啦啦会帮你创建完整的 FontStyleConfig.lua 文件，包含：- 文本角色注册机制- 智能字体获取- 变更通知系统- 联动机制

### 第四步：让嗒啦啦帮你接入编辑器

最后说：

```嗒啦啦，帮我在 MaterialEditOverlay 中添加字体编辑 Tab，支持实时预览和云端保存```

这样一套完整的字体系统就搞定了！

# 基础用法：如何使用字体

注册好字体后，用起来非常简单：

```lua-- UI.Label 用 fontFamily 属性local label = UI.Label({ text = "玩家名称", fontFamily = "wenkai", -- 用文楷 fontSize = 16, fontColor = { 255, 255, 255, 255 }})

-- UI.Button 也一样local button = UI.Button({ text = "开始游戏", fontFamily = "impact", -- 用标题黑 fontSize = 24, onClick = function() end})

-- NanoVG 直接绘制用 nvgFontFacelocal nvg = UI.GetNVGContext()nvgFontFace(nvg, "impact") -- 用标题黑nvgFontSize(nvg, 32)nvgText(nvg, 100, 100, "PERFECT!")```

## 为什么需要 FontStyleConfig 模块？

基础用法虽然简单，但实际开发中会遇到几个问题：

1. **硬编码太麻烦**：160+ 个文本角色，每个都要写 fontFamily，改起来疯了2. **没有统一管理**：不知道哪些文本用了哪些字体，容易混乱3. **不能实时预览**：改字体要改代码、重新编译，效率很低4. **多设备不同步**：一台设备调好的字体，另一台设备还要重调

FontStyleConfig 模块就是为了解决这些问题而设计的。

## FontStyleConfig 核心功能

### 1. 文本角色管理

把游戏中的所有文本都注册为角色：

```lua-- 批量注册文本角色FontStyleConfig.RegisterBatch({ ["battle.player_name"] = { "sans", 16 }, ["battle.enemy_name"] = { "sans", 16 }, ["battle.hp"] = { "sans", 14 }, ["battle.judgment"] = { "impact", 28 }, ["battle.damage"] = { "impact", 24 }, ["battle.log"] = { "wenkai", 14 }, ["battle.log_headline"] = { "display", 20 }, -- ... 更多文本角色})```

### 2. 智能联动系统

同类文本自动同步：

```lua-- 所有按钮字体联动FontStyleConfig.LinkFontFamily({ "battle.skill_btn", "bpause.btn", "bpause.btn_pri", -- ... 更多按钮})

-- 字号比例联动FontStyleConfig.LinkFontSize("reward.card_name", { "reward.card_name", -- 基准 "reward.card_tier", -- 自动按比例计算 "reward.card_desc", -- 自动按比例计算})```

### 3. 实时编辑器

在游戏内实时调整字体：- 按屏幕分类管理文本角色- 实时预览效果- 一键重置功能- 云端同步保存

### 4. 保存机制

字体编辑器的修改会自动保存到云端，但如果需要持久化到代码中，可以这样做：

1. **查看修改日志**：在游戏中调整完字体后，查看控制台日志，会显示所有修改的文本角色

2. **让嗒啦啦修改代码**：复制日志内容，然后对嗒啦啦说：

```嗒啦啦，帮我把这些字体修改持久化到代码中：[复制日志内容]```

嗒啦啦会帮你：- 更新 FontStyleConfig 的默认值- 修改相关文件中的字体配置- 确保修改被永久保存

这样即使清除云端数据，字体配置也会保持不变。

## 实战应用：快速上手指南

### 1. 创建带绑定的文本组件

```lua-- 创建自动绑定的标签local label = FontStyleConfig.Label("battle.player_name", { text = "玩家名称", fontColor = { 255, 255, 255, 255 }})

-- 创建自动绑定的按钮local button = FontStyleConfig.Button("battle.skill_btn", { text = "技艺", onClick = function() end})```

### 2. 监听字体变更

```lua-- 注册监听器local listenerId = FontStyleConfig.Listen( { "battle.damage", "battle.judgment" }, function(roleKey, style) -- 处理特殊逻辑，如重新计算布局 if roleKey == "battle.damage" then RecalculateDamageTextPosition() end end)

-- 清理监听器（重要，防止内存泄漏）FontStyleConfig.Unlisten(listenerId)```

### 3. 批量重置

```lua-- 重置整个屏幕的字体设置FontStyleConfig.ResetScreenOverrides("Battle")```

## 我们的不足与改进空间

虽然这套系统解决了很多问题，但我们也有很多做得不够好的地方：

### 1. 没有多字重支持

**问题**：8 个字体族全部只注册了 normal 字重，粗体靠字号+2 模拟

**教训**：设计时要考虑字重需求，粗体在标题、强调等场景很常用

### 2. 没有字体 fallback 链

**问题**：中文字体之间没有 fallback 机制，生僻字可能显示方块

**教训**：如果游戏有大量生僻字（比如古风游戏），要考虑 fallback

### 3. 74MB 字体资源没有子集化