Skip to main content

字体

概述

字体(Font)的样式具有多样性,使用字体编辑器(Font Editor)可以对其进行自定义设计。本文档将详细介绍字体编辑器的各项功能及使用。

字体编辑器

打开字体编辑器

请参照UI编辑器文档打开UI编辑器

UI编辑器(UI Editor)中,依次点击菜单栏资源(Resource)-> 字体(Font),打开字体编辑器(Font Editor)

2023-03-01_111334

字体编辑器界面如下图所示。

2023-03-01_113745

编号名称说明
1菜单栏(Menu Bar)用于保存字体,暂时只具备保存功能
2文件列表(File List)用于展示所有存放字体的文件,可以在此处删改文件
3字体列表(Font List)在选中某个字体文件后,用于展示该文件中的所有字体
4字体预览(Font Preview)用于预览当前字体的效果
5字体属性(Font Properties)可以查看或编辑字体的任意属性,属性的修改会直接显示在字体预览面板中

预览字体

Flexi编辑器中使用的所有字体都保存在数个字体文件中,一个字体文件可以包含多个字体。在文件列表(File List)面板中选中字体文件后,字体列表(Font List)面板中会展示该字体文件包含的所有字体。

2023-03-01_133535

字体列表(Font List)面板中,点击选中任意字体,便可在右侧的字体预览(Font Preview)面板中预览该字体,其相关属性也会展示在字体属性(Font Properties)面板中。

2023-03-01_135834

字体文件

编辑字体文件

文件列表(File List)面板中右击任意区域,弹出快捷菜单,点击添加(Add),弹出添加字体文件(Add Font File)窗口。点击目录(Directory)属性旁的 2023-03-01_152707 按钮,可在新弹出的窗口中设置字体文件存储路径,然后在文件名称(File Name)属性中输入文件名称(不需要扩展名,会自动补充),点击OK,即可添加新的空字体文件,其中不包含任何字体。

2023-03-01_152708

选中已创建的字体文件,右击弹出快捷菜单,可以对当前字体文件进行重命名(Rename)或者移除(Remove)

2023-03-01_152849

编辑字体

文件列表(File List)面板中选择字体文件,在字体列表(Font List)面板中任意区域右击,弹出快捷菜单,点击添加(Add),弹出添加字体(Add Font)窗口,输入字体名称,点击OK,即可添加新的字体。

2023-03-01_154154

或者在弹出的快捷菜单中点击添加位图字体(Add Bitmap Font),弹出添加位图字体(Add Bitmap Font)窗口,输入字体名称,点击图像(Image)右侧的 2023-03-01_154158 按钮,弹出文件浏览器(File Browser) 窗口,按需选择贴图后,点击OK,即可添加新的位图字体。

2023-03-01_154156

选中已创建的字体并右击,弹出快捷菜单,点击移除(Remove),可以移除当前字体。

2023-03-01_155426

注意:在新建/重命名字体或者字体文件时,应当注意名称不能重复,并且任意两个文件内也不能存在同名字体。如果命名不规范,会弹出提示并撤销相关操作。

2023-03-01_160913

字体属性

属性说明

普通字体

2023-03-02_173818

名称说明
字体名称(Font Name)字体的名称,用于区分不同的字体
字体文件(Font File)字体使用的字体文件,不同字体文件的视觉效果不同
字号(Word Size)决定字体的大小
字间距(Word Space)决定当前字体中各个字母之间的间距
粗体(Bold)加粗字体
斜体(Italic)使字体倾斜
阴影颜色(Shadow Color)决定字体阴影颜色
阴影X偏移(Shadow X Offset)使字体阴影在水平方向发生偏移,负数为左移,正数为右移
阴影Y偏移(Shadow Y Offset)使字体阴影在垂直方向发生偏移,负数为上移,正数为下移
渐变类型(Gradient Type)使字体颜色由深至浅进行渐变,共有四种类型:无渐变、向上渐变、向下渐变、由中间向两端渐变
描边颜色(Outline Color)决定字体外轮廓的颜色
描边粗细(Outline Thickness)决定字体描边的粗细,属性值为0时没有描边效果显示

位图字体

2023-03-02_173820

名称说明
字体名称(Font Name)字体的名称,用于区分不同的字体
字体文件(Font File)字体使用的贴图文件,会展示在下方
名称(Name)位图字体所要替换的文本,如果一段文字应用了该位图字体,那么所有与该名称对应的文本会被替换为图片
左边距(Left Margin)被截取的贴图的左边距(相对于整张贴图)
上边距(Top Margin)被截取的贴图的上边距(相对于整张贴图)
宽度(Width)被截取的贴图的宽度
高度(Height)被截取的贴图的高度

属性编辑

修改字体属性可以使字体的视觉效果发生变化。

普通字体

改变字体阴影颜色(初始状态为无阴影)。点击阴影颜色(Shadow Color)属性右侧的颜色条,弹出颜色选择(Color Picker)窗口,设置所需颜色,点击OK。

注意:在颜色选择窗口中,透明度(Alpha)值默认为0,适当调整该数值才可以看到字体阴影颜色效果。此外,由于阴影与字体初始位置重叠,未设置字体阴影偏移,因此效果不明显,只能看到淡淡的描边。

2023-03-02_132507

改变字体阴影偏移。在阴影X偏移(Shadow X Offset)阴影Y偏移(Shadow Y Offset)属性中修改偏移值,即可设置字体阴影偏移效果。

2023-03-02_133019

改变字体渐变类型。点击渐变类型(Gradient Type)属性右侧的 2023-03-02_133020 按钮打开下拉框,选择所需渐变类型,即可设置字体渐变效果。

2023-03-02_133021

改变字体描边颜色(初始状态为无描边)。点击描边颜色(Outline Color)属性右侧的颜色条,弹出颜色选择(Color Picker)窗口,设置所需颜色,点击OK。

注意:由于描边粗细(Outline Thickness)属性值默认为0,因此当前无描边效果显示。

2023-03-02_133023

改变字体描边粗细(初始数值为0)。在描边粗细(Outline Thickness)属性中修改描边粗细值,即可设置字体描边效果。

2023-03-02_133027

位图字体

字体属性(Font Properties)窗口的表格中右击弹出快捷菜单,点击添加(Add),弹出添加字体(Add Font)窗口,输入名称后点击OK,即可添加字体映射。

2023-06-12_145741

选中已创建的字体映射并右击,弹出快捷菜单,点击移除(Remove),可以移除当前字体映射。

2023-06-12_152119

每个字体映射包含5个属性,名称(Name)用于表明该映射所对应的文本,其余四个属性用于在贴图中截取出对应的图片。当一个控件应用了该位图字体时,如果渲染了表格中的文本,则会被替换为对应坐标所截取的贴图;如果是表格中没有的文本,则不会被渲染。例如,字体预览(Font Preview)面板中的默认示例文本为“123”,而表格中只有文本“1”的映射,因此在字体预览(Font Preview)面板中只显示文本“1”对应坐标所截取的贴图。

2023-06-12_172152

拖动左侧的矩选框或者双击表格中的数值均可修改截取的区域,并且字体预览(Font Preview)面板中的预览效果也会随之变化。

Adjust

保存编辑

在所有编辑完成后,点击菜单栏中的 2023-03-01_155848 按钮,即可保存所有修改。

注意:如果编辑后不进行保存,那么修改将不会生效;直接退出字体编辑器会导致修改被撤销。如果在字体编辑器中有修改未保存,那么字体编辑器的标签页上会显示星号。

2023-03-01_160316

应用字体

UI编辑器(UI Editor)界面的控件栏(Control Bar)面板中,选择Label控件,并在编辑区域(Editing Area)下点击进行创建。在控件属性面板中点击Font属性,弹出选择字体(Select Font)窗口,选择所需字体,点击OK,即可应用相应的字体效果。

2023-03-01_170822

如果仍需修改当前所展示的字体,可以参照前文介绍在当前的选择字体(Select Font)窗口或者重新打开字体编辑器对字体进行再编辑。

注意:OK按钮除了返回所选值外也会保存修改,但是一旦点击就会退出当前窗口。

2023-03-02_161701

选择字体后效果如图所示。

2023-03-02_162916

如果要清空所选字体,只需再次打开选择字体(Select Font)窗口,不选择任何字体,直接点击OK即可。

2023-03-02_165746