CocosCreator3.8 Research Notes (12) CocosCreator Font Resource Understanding


There are three commonly used font resources in Cocos Creator: system fonts, dynamic fonts, and bitmap fonts.


1. System fonts

The system font calls the system font that comes with the running platform to render text, and does not require the user to add any related resources to the project.


To use the system font, the Label component's Use System Font property needs to be checked.

FontFamily just select the corresponding font:


Insert image description here


2. Dynamic fonts

Currently, Cocos Creator supports dynamic fonts in TTF format.

Just drag the font file with the extension TTF into the resource manager to complete the import of font resources.


How to use TTF fonts :

1. In the resource manager, import the ttf font file


Insert image description here


2. Create a 2DLabe object in the hierarchy manager

Insert image description here


3. Set the font properties in the Property Inspector

The first step is to cancel the User System Font option

Insert image description here


In the second step, click the button on the right side of the Font selection box and select the imported TTF file in the pop-up drop-down selection box.

Insert image description here


Once the setup is complete, you can use:

Insert image description here


3. Bitmap fonts

Bitmap fonts are composed of font files in fnt format and a png picture. The fnt file provides an index for each character image.


Fonts in this format are generally generated by software, and the Windows platform uses more fnt font generation software:

Bmfont

Glyph Designer


For the steps of Bmfont software to generate fnt font, please view this article: The steps of Bmfont software to generate fnt font .


Use of bitmap fonts:

1. We drag the generated fnt file and png file into the resource manager at the same time.


Insert image description here


2. Create a 2DLabe object in the hierarchy manager

Insert image description here


3. Set the font properties in the Property Inspector

The first step is to cancel the User System Font option

Insert image description here


In the second step, click the button on the right side of the Font selection box, and in the pop-up drop-down selection box, select the imported fnt file.

Insert image description here


Once the setup is complete, you can use:

Insert image description here


The effect is as follows:

Insert image description here


Guess you like

Origin blog.csdn.net/lizhong2008/article/details/132783682