Cocos Creator 常用的字体资源有三种:系统字体、动态字体、位图字体。



一、系统字体

系统字体是调用运行平台自带的系统字体来渲染文字,不需要用户在项目中添加任何相关资源。



使用系统字体, Label 组件 Use System Font 属性需要勾选。

FontFamily 选择对应的字体即可:



CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_CocosCreator3.8



二、动态字体

目前 Cocos Creator 支持 TTF 格式的动态字体。

只要将扩展名为 TTF 的字体文件拖拽到 资源管理器 中,即可完成字体资源的导入。



TTF字体使用方法

1、在资源管理器中,导入ttf字体文件



CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_CocosCreator3.8_02



2、在层级管理器中创建一个2DLabe 对象

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_CocosCreator_03



3、在属性检查器中设置字体属性

第一步,取消 User System Font选项

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_Cocos_04



第二步,在点击 Font 字体选择框右侧按钮,在弹出下拉选择框中,选择导入的TTF文件

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_笔记_05



设置完成,即可使用:

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_CocosCreator_06



三、位图字体

位图字体由 fnt 格式的字体文件和一张 png 图片组成,fnt 文件提供了对每一个字符小图的索引。



这种格式的字体 一般用软件生成,windows 平台使用较多的fnt字体生成软件:

Bmfont

Glyph Designer



Bmfont 软件生成fnt 字体步骤可查看这篇文章:Bmfont 软件生成fnt 字体步骤。


位图字体的使用:

1、我们将生成好的 fnt 文件和 png 文件 同时拖拽到 资源管理器中



CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_编辑器_07



2、在层级管理器中创建一个2DLabe 对象

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_笔记_08



3、在属性检查器中设置字体属性

第一步,取消 User System Font选项

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_CocosCreator3.8_09



第二步,在点击 Font 字体选择框右侧按钮,在弹出下拉选择框中,选择导入的fnt文件

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_CocosCreator_10



设置完成,即可使用:

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_Cocos_11



效果如下:

CocosCreator3.8研究笔记(十二)CocosCreator 字体资源理解_笔记_12