[RT-Thread/GUI教程] 跟我一步步使用系统外字体

发布于 2011-08-16 16:55:18 浏览：19168 订阅该版

RT-Thread/GUI做为一个GUI，它具备基本的字体、图片渲染能力，但因为其采用“不公开”的字体点阵方式，导致很多用户不知道如何为它更换字体。

本教程就是一个使用系统外字体的指引，按照一步步的方式为RT-Thread/GUI更换为用户自己的字体，让界面更美观，更完善。

本篇从更换英文字体谈起。在完成这篇教程之前，很多网友都向我推荐使用PCtoLCD2002这个字体字模制作软件，因为它能够非常方便的把系统中的字体转换成相应的字模数据，也非常方便的对字模数据进行任意调整。

PCtoLCD2002字体软件可在网上搜索，非常容易下载到，这里就不给出链接了。

运行PCtoLCD2002软件：
[attachment=-4]

前面提及到了，RT-Thread/GUI的点阵字体数据并“不公开”（其实是文档描述不是太全面，或者描述在那里，但真正制作出相应的点阵字体的人不多），PCtoLCD2002默认配置产生的字模数据也不可能直接使用。还好，PCtoLCD2002软件提供了非常方便的可定制化方法，先找到选项：
[attach]0[/attach]

请注意其中的配置情况，需要阴码，逐行方式，C51格式。另外别忘了选择自定义格式，以及注释前缀等等设置。按照这个设置配置PCtoLCD2002，基本上就是RT-Thread/GUI所需要的点阵格式了。

接下来我们就要开始生成字模了，因为RT-Thread/GUI中中、英文是分开的，所以我们先单独为英文生成相应的字模。选择导入大量文本的工具按钮：
[attachment=-3]

在选择文本的地方选择PCtoLCD2002软件带的ASC.PTL文件，这个里面包括了完整的英文字符。然后点击 开始生成 ，请保存为ascfont.txt。这样字体点阵数据就生成完毕。（PCtoLCD2002软件默认的字体是宋体，大小是16x16）

接下来我们需要测试下这份字体文件是否好用，先编写个字体信息代码ascfont.c：

```c
#include <rtgui/font.h>

const rt_uint8_t asc_font[] = {
#include "ascfont.txt"
};

const struct rtgui_font_bitmap ascfont =
{
	asc_font, 		/* bmp */
	RT_NULL,			/* each character width, NULL for fixed font */
	RT_NULL,			/* offset for each character */
	8,					/* width */
	16, 				/* height */
	0, 					/* first char */
	255					/* last char */
};

struct rtgui_font rtgui_font_ascfont =
{
	"asc", 				/* family */
	16, 				/* height */
	1, 					/* refer count */
	&bmp_font_engine, 	/* font engine */
	(struct rtgui_font_bitmap *)&ascfont,				/* font private data */
};
```

请把ascfont.txt文件与ascfont.c文件放在一起，因为从代码中我们可以看到，它实际上做了一个ascfont.txt的文件包含。

接下来我们再写相应的测试文件：
```c
#include <rtthread.h>
#include <rtgui/rtgui_system.h>
#include <rtgui/widgets/window.h>
#include <rtgui/widgets/label.h>

extern struct rtgui_font rtgui_font_ascfont;

void window_entry(void* parameter)
{
	rt_mq_t mq;
	rtgui_win_t *win;
	rtgui_font_t* font;
	rtgui_label_t* label;
	rtgui_rect_t rect = {10, 30, 220, 250};

rtgui_font_system_add_font(&rtgui_font_ascfont);

mq = rt_mq_create("wmq", 256, 8, RT_IPC_FLAG_FIFO);
	/* 注册当前线程为GUI线程 */
	rtgui_thread_register(rt_thread_self(), mq);

win = rtgui_win_create(RT_NULL, "Font", &rect, RTGUI_WIN_STYLE_DEFAULT);
	rect.x1 += 20;
	rect.x2 -= 5;
	rect.y1 += 5;
	rect.y2 = rect.y1 + 48;

/* 创建一个label控件 */
	label = rtgui_label_create("ABCD abcd");
	rtgui_widget_set_rect(RTGUI_WIDGET(label), &rect);
	font = rtgui_font_refer(rtgui_font_ascfont.family, rtgui_font_ascfont.height);
	RTGUI_WIDGET_FONT(RTGUI_WIDGET(label)) = font;

rtgui_container_add_child(RTGUI_CONTAINER(win), RTGUI_WIDGET(label));

/* 非模态显示窗口 */
	rtgui_win_show(win, RT_FALSE);

/* 执行窗口的事件循环 */
	rtgui_win_event_loop(win);

/* 去注册GUI线程 */
	rtgui_thread_deregister(rt_thread_self());

/* delete message queue */
	rt_mq_delete(mq);
}

void fonttest_window(void)
{
	rt_thread_t tid;

tid = rt_thread_create("win", window_entry, RT_NULL, 2048, 20, 5);
	if (tid != RT_NULL) rt_thread_startup(tid);
}
```

这段代码会创建一个窗口，并在窗口内显示“ABCD abcd”的标签文本。看看产生的效果如何：
[attachment=-2]

因为本身是宋体，所以我们看到的效果与系统内自带的英文字体差别不大，我们换一个字体，PCtoLCD2002中选择Script，48的宽度：
[attachment=-1]

因为字体大小信息已经更改，所以相应的字体文件也需要更改：
```c
#include <rtgui/font.h>

const rt_uint8_t asc_font[] = {
#include "ascfont.txt"
};

const struct rtgui_font_bitmap ascfont =
{
	asc_font, 		/* bmp */
	RT_NULL,			/* each character width, NULL for fixed font */
	RT_NULL,			/* offset for each character */
	24,					/* width */
	48, 				/* height */
	0, 					/* first char */
	255					/* last char */
};

struct rtgui_font rtgui_font_ascfont =
{
	"asc", 				/* family */
	48, 				/* height */
	1, 					/* refer count */
	&bmp_font_engine, 	/* font engine */
	(struct rtgui_font_bitmap *)&ascfont,				/* font private data */
};
```

![PCtoLCD2002_main.jpg](https://oss-club.rt-thread.org/uploads/53_c0a73f8a81f28d58497ad79e849688ce.jpg)
 
 
![PCtoLCD2002_asc.jpg](https://oss-club.rt-thread.org/uploads/53_334d15fcbb28b51ba4a04d498338a0c3.jpg)
 
 
![GUI_font1.jpg](https://oss-club.rt-thread.org/uploads/53_150152a453aad96f084903b2170ebbbd.jpg)
 
 
![GUI_font2.jpg](https://oss-club.rt-thread.org/uploads/53_bc77dccdb3e959b725cd30a5af048447.jpg)
 
 
![PCtoLCD2002_setting.jpg](https://oss-club.rt-thread.org/uploads/53_2bd553cca300b3450fa4ff3a9aa52bc2.jpg)
 
 
![PCtoLCD2002_hz.jpg](https://oss-club.rt-thread.org/uploads/53_4f5c6b9daeaf6171d728e3b4fa2d9659.jpg)
 
 
![GUI_font3.jpg](https://oss-club.rt-thread.org/uploads/53_866afc58eadc3419a5937d77d7d65bd9.jpg)

22 个回答

bernard 2011-08-17

这家伙很懒，什么也没写！

继续中文字体的替换，

在RT-Thread/GUI中，对于中文字体有两种处理方式，一种是把点阵数据转换成C的数组，然后在代码中直接使用，比较适合于把字体与程序都烧写在flash中的方式；另外一种是把点阵数据保存为一个二进制文件，在RT-Thread/GUI中需要使用时，动态的从文件系统中载入进来（RT-Thread/GUI字体引擎中会有一个小型的cache，以把最近使用到的字体数据做一个缓存）。

这两种方式PCtoLCD2002都支持，并且中文字体二进制文件的数据实质上也是与C数组数据完全一样，所以本篇还是如上篇英文点阵字体那样，仅讨论点阵字体C数组的方式。

PCtoLCD2002的设置与英文字体字模提取方式，完全一样。与英文字体不同的地方在于，文本的选取，如下图：
[attach]655[/attach]
请选择Gb2312.PTL文件做为文本。

而后点击开始生成（假设字体选择的是幼圆，18号字体），假设生成为hzfont.TXT文件。

相应的中文字体信息代码可采用如下方式（hzfont.c文件）：

```c
#include <rtgui/font.h>

const rt_uint8_t hz_font[] = {
#include "hzfont.txt"
};

const struct rtgui_font_bitmap hzfont =
{
    hz_font,            /* bmp */
    RT_NULL,            /* each character width, NULL for fixed font */
    RT_NULL,            /* offset for each character */
    18,                 /* width */
    18,                 /* height */
    0,                  /* first char */
    255                 /* last char */
};

extern struct rtgui_font_engine hz_bmp_font_engine;
struct rtgui_font rtgui_font_hz =
{
    "you",              /* family */
    18,                 /* height */
    1,                  /* refer count */
    &hz_bmp_font_engine,/* font engine */
    (void *)&hzfont,        /* font private data */
};
```

请注意其中的width、height信息，需要设置成相匹配的大小（18号字体应该设置为18），否则点阵数据会读取错误。

和上节类似，我们也编写个测试代码用于显示中文（fonttest.c文件）：
```c
#include <rtthread.h>
#include <rtgui/rtgui_system.h>
#include <rtgui/widgets/window.h>
#include <rtgui/widgets/label.h>

extern struct rtgui_font rtgui_font_hz;
extern struct rtgui_font rtgui_font_ascfont14;

void window_entry(void* parameter)
{
	rt_mq_t mq;
	rtgui_win_t *win;
	rtgui_font_t* font;
	rtgui_label_t* label;
	rtgui_rect_t rect = {10, 30, 220, 250};

rtgui_font_system_add_font(&rtgui_font_ascfont14);
	rtgui_font_system_add_font(&rtgui_font_hz);

mq = rt_mq_create("wmq", 256, 8, RT_IPC_FLAG_FIFO);
	/* 注册当前线程为GUI线程 */
	rtgui_thread_register(rt_thread_self(), mq);

win = rtgui_win_create(RT_NULL, "Font", &rect, RTGUI_WIN_STYLE_DEFAULT);
	rect.x1 += 20;
	rect.x2 -= 5;
	rect.y1 += 5;
	rect.y2 = rect.y1 + 48;

/* 创建一个label控件 */
	label = rtgui_label_create("中英文Abcd");
	rtgui_widget_set_rect(RTGUI_WIDGET(label), &rect);
	font = rtgui_font_refer(rtgui_font_hz.family, rtgui_font_hz.height);
	RTGUI_WIDGET_FONT(RTGUI_WIDGET(label)) = font;
	rtgui_container_add_child(RTGUI_CONTAINER(win), RTGUI_WIDGET(label));

rect.y1 = rect.y2 + 5;
	rect.y2 += 48;

/* 创建一个label控件 */
	label = rtgui_label_create("中英文Abcd");
	rtgui_widget_set_rect(RTGUI_WIDGET(label), &rect);
	font = rtgui_font_refer("hz", 16);
	RTGUI_WIDGET_FONT(RTGUI_WIDGET(label)) = font;
	rtgui_container_add_child(RTGUI_CONTAINER(win), RTGUI_WIDGET(label));

/* 非模态显示窗口 */
	rtgui_win_show(win, RT_FALSE);

/* 执行窗口的事件循环 */
	rtgui_win_event_loop(win);

/* 去注册GUI线程 */
	rtgui_thread_deregister(rt_thread_self());

/* delete message queue */
	rt_mq_delete(mq);
}

void fonttest_window(void)
{
	rt_thread_t tid;

tid = rt_thread_create("win", window_entry, RT_NULL, 2048, 20, 5);
	if (tid != RT_NULL) rt_thread_startup(tid);
}
```

为了与原来的字体做一个比对，我们在测试文本下方也调用系统字体显示一遍，其效果如下：
[attach]656[/attach]

我们看到窗口上的字体已经与系统的字体明显不同了，字体大小也相应的不一样。因为是夹杂着英文显示，而系统中并没有18号的英文字体，RT-Thread/GUI自动采用系统默认字体来显示英文。

* 注：
代码请使用svn中最新的RT-Thread/GUI代码，老的代码在超过16号字体显示时存在一些问题。新的代码会在RT-Thread 0.4.0 RC1版本中发布出来。

f117c 2011-09-04

这家伙很懒，什么也没写！

bernard 2011-09-04

这家伙很懒，什么也没写！

EmbWireless 2011-09-08

这家伙很懒，什么也没写！

zx2591 2011-09-30

这家伙很懒，什么也没写！

bernard 2011-09-30

这家伙很懒，什么也没写！

zx2591 2011-09-30

这家伙很懒，什么也没写！

xiao苦 2012-02-12

这家伙很懒，什么也没写！

咖啡恋 2012-08-02

这家伙很懒，什么也没写！

RT-Thread/GUI做为一个GUI，它具备基本的字体、图片渲染能力，但因为其采用“不公开”的字体点阵方式，导致很多用户不知道如何为它更换字体。

本教程就是一个使用系统外字体的指引，按照一步步的方式为RT-Thread/GUI更换为用户自己的字体，让界面更美观，更完善。

PCtoLCD2002字体软件可在网上搜索，非常容易下载到，这里就不给出链接了。

运行PCtoLCD2002软件：
[attachment=-4]

接下来我们需要测试下这份字体文件是否好用，先编写个字体信息代码ascfont.c：
```
#include <rtgui/font.h>

const rt_uint8_t asc_font[] = {
#include "ascfont.txt"
};

请把ascfont.txt文件与ascfont.c文件放在一起，因为从代码中我们可以看到，它实际上做了一个ascfont.txt的文件包含。

接下来我们再写相应的测试文件：
```
#include <rtthread.h>
#include <rtgui/rtgui_system.h>
#include <rtgui/widgets/window.h>
#include <rtgui/widgets/label.h>

extern struct rtgui_font rtgui_font_ascfont;

void window_entry(void* parameter)
{
	rt_mq_t mq;
	rtgui_win_t *win;
	rtgui_font_t* font;
	rtgui_label_t* label;
	rtgui_rect_t rect = {10, 30, 220, 250};

rtgui_font_system_add_font(&rtgui_font_ascfont);

mq = rt_mq_create("wmq", 256, 8, RT_IPC_FLAG_FIFO);
	/* 注册当前线程为GUI线程 */
	rtgui_thread_register(rt_thread_self(), mq);

win = rtgui_win_create(RT_NULL, "Font", &rect, RTGUI_WIN_STYLE_DEFAULT);
	rect.x1 += 20;
	rect.x2 -= 5;
	rect.y1 += 5;
	rect.y2 = rect.y1 + 48;

rtgui_container_add_child(RTGUI_CONTAINER(win), RTGUI_WIDGET(label));

/* 非模态显示窗口 */
	rtgui_win_show(win, RT_FALSE);

/* 执行窗口的事件循环 */
	rtgui_win_event_loop(win);

/* 去注册GUI线程 */
	rtgui_thread_deregister(rt_thread_self());

/* delete message queue */
	rt_mq_delete(mq);
}

void fonttest_window(void)
{
	rt_thread_t tid;

tid = rt_thread_create("win", window_entry, RT_NULL, 2048, 20, 5);
	if (tid != RT_NULL) rt_thread_startup(tid);
}
```

这段代码会创建一个窗口，并在窗口内显示“ABCD abcd”的标签文本。看看产生的效果如何：
[attachment=-2]

因为本身是宋体，所以我们看到的效果与系统内自带的英文字体差别不大，我们换一个字体，PCtoLCD2002中选择Script，48的宽度：
[attachment=-1]