跳到主要内容

插入文字与字体

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

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

打开文字窗口

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

字体管理

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

导入字体

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

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

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

/new-medias/drawing/drawing-insert-text-desktop-drag-font.gif
把字体文件拖进文字窗口完成导入

整理与导出字体

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

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

用 Resprite Font 插入文字

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

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

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

使用 Resprite Font 教程

用矢量字体插入文字

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

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

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

/versions/r49/vertical_text_cn.png
纵向排版模式
使用 TTF 字体教程

创建自定义 Resprite Font

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

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

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

/new-medias/drawing/drawing-insert-text-save-as-font-dialog.png
当前版本的字体导出窗口

继续阅读