跳到主要内容

插入文字与字体

Resprite 的文字窗口同时支持两套字体体系:

  • Resprite Font:像素字体。字符按像素网格绘制,显示时不会被重采样。
  • 矢量字体:常见的字体文件,适合标题、说明文字和多行排版。

打开文字窗口

从编辑菜单打开文字窗口即可开始插入文字。iOS 当前菜单里显示为“插入字符”,桌面端 / Android 显示为“插入文字”。部分布局下,也可以通过动作栏按钮或快捷键打开同一入口。

字体管理

在文字窗口左侧的字体列表中,可以导入、选择和整理字体。

导入字体

点击字体列表旁边的 + 按钮即可导入更多字体。

  • iOS 可从文件、Files App 交给 Resprite 的字体文件中导入。
  • 桌面端 / Android 可从文件选择器导入。
  • 桌面端还支持把支持的字体文件直接拖拽到文字窗口中导入。
支持格式
  • iOS:.resfont、旧扩展名 .resprite-font.ttf.ttc.otf.otc
  • 桌面端 / Android:.resfont、旧扩展名 .resprite-font.ttf
iOS 导入字体
iOS 导入字体
桌面端字体管理操作
桌面端字体管理操作

如果你经常整理字库,桌面端底部这一排操作会更顺手;移动端则更适合从系统文件入口逐个导入。

把字体文件拖进文字窗口完成导入
把字体文件拖进文字窗口完成导入

整理与导出字体

导入后的字体可以重命名或删除,方便整理项目常用字库。桌面端还可以直接打开字体文件夹,或导出当前字体;iOS 可共享当前选中的字体文件。

想要扩充字库,可浏览 Resprite Fonts Collection

用 Resprite Font 插入文字

Resprite Font 更适合 HUD、像素 UI、图标和需要保持像素锐利边缘的短文本。

  1. 在左侧选择一个 Resprite Font。
  2. 在字符网格中点按字符,逐个拼出内容。
  3. 需要时可使用空格、退格和清空按钮整理内容。
  4. 调整字距,观察右侧预览。
  5. 点击 插入,当前预览会作为图像插入到画布中,之后可按正常的插图流程继续调整位置或变换。
混合使用多种 Resprite Font
混合使用多种 Resprite Font
提示

同一段内容里可以混合多种 Resprite Font。装饰图标、表情符号、HUD 元素和正文字符可以一起组合。

使用 Resprite Font 教程

用矢量字体插入文字

矢量字体更适合标题、说明文字和较长的多行内容。

  1. 在左侧选择一个矢量字体。
  2. 在输入框中直接键入内容,支持多行。
  3. 调整字号、颜色、行距和字距。
  4. 需要时可切换纵向排版;桌面端还提供抗锯齿开关。
  5. 点击 插入,当前预览会作为图像插入到画布中。
多行文字设置
多行文字设置

在多行文字里,行距和字距会直接影响整体节奏。需要做竖排标题、章节标记或东方古风排版时,可以再配合纵向排版使用。

纵向排版模式
纵向排版模式
使用 TTF 字体教程

创建自定义 Resprite Font

如果你希望把自己的像素字库、图标集或 HUD 元素重复使用,可以把精灵导出为 Resprite Font。

  1. 使用模板精灵绘制字形。
  2. 从导出菜单打开字体导出窗口。iOS 当前显示为“导出为字体”,桌面端显示为“另存为字体”。
  3. 设置字符网格宽高、字距、是否等宽,以及等宽宽度。
  4. 需要时填写作者和描述,并用预览检查输出效果。
  5. 保存后,新字体会出现在字体列表中,后续可直接拿来插入文字。
Resprite Font 模板
Resprite Font 模板

Resprite Font 不必局限于字母或数字。你也可以把常用图标、表情、边框或装饰元素做成“字体”,让它们在同一套输入流程里快速复用。

当前版本的字体导出窗口
当前版本的字体导出窗口

继续阅读