字体

支持的字体

  1. 提供两种字体实现方式:点阵字体(bitmap),freetype的字体。

  2. 点阵字体支持LVGL生成的bitmap格式

  3. freetype字体格式仅支持ttf格式

  4. 支持多个bitmap以及多个freetype的ttf同时使用

  5. 支持标准的emoji

  6. 支持对某个obj固定字体

  7. 提供tiny压缩字体供客户免费使用,该字体粗细为55,支持27000+简繁汉字,占用空间1.06MB

  8. 提供印地语变形(shape)供客户免费使用。包括以下语种:

    语言

    language

    印地语

    Hindi

    马拉地语

    Marathi

    梵语

    Sanskrit

    尼泊尔语

    Nepali

    迈蒂利语

    Maithili

    孔卡尼语

    Konkani

    多格拉语

    Dogri

    博多语

    Bodo

注: 对于其他需要变形(shape)的语言,需要客户寻找支持变形算法以及对应的ttf。

字体放置的目录

Solution方案中,资源都是存放在resource目录下的,字体需要放在resource/fonts下面。

ttf字体增删

  1. 新增: 把新增ttf字体放在solution/examples/xxx/resource/fonts/freetype目录下面

  2. 顺序: 通过编辑ttf_order.txt,可以调整字库的顺序。UI显示的字是根据ttf_order中的顺序遍历字体获取的

  3. 删除: 删除对应的ttf即可

ttf字体选择

可以通过butterfli工具的UI选择需要编译的字体

ttf字号设置

  1. lvsf_font.h中定义了以下默认字号

  1. 如果项目需要使用不同的字号,从\solution\framework\__template__\project目录下copy子目录__applicaiton_private__到对应的HCPU和Simulator目录下,并在menuconfig勾选下面的配置打开FT_SIZE_SELF_DEFINED的宏。修改__applicaiton_private__/ft_size_custom_reg.h中的字号就可以实现字号的更改。

ft_size_custom_reg.h示例

/**
 * @brief  Register fonts through this interface.
 *         The font size must be arranged from small to large.
 *         Because font is searched from small to large.
 */
#ifdef FT_SIZE_SELF_DEFINED

typedef enum
{
    FONT_SMALL      = 16,
    FONT_NORMAL     = 20,
    FONT_SUBTITLE   = 24,
    FONT_TITLE      = 28,
    FONT_BIGL       = 36,
    FONT_HUGE       = 56,
    FONT_SUPER      = 72,
} FONT_SIZES;

#define LVSF_FREETYPE_FONT_REGISTER(freetype_font)                          \
    extern lv_font_freetype_lib_dsc_t CONCAT_2(freetype_font, _lib);        \
    SECTION_ITEM_REGISTER(FONT_SECTION_NAME, static const font_desc_t CONCAT_2(freetype_font, _reg_list)[]) =     \
    {                                                                       \
        LVSF_FONT_REGISTER(freetype_font, 10),                              \
        LVSF_FONT_REGISTER(freetype_font, 11),                              \
        LVSF_FONT_REGISTER(freetype_font, 12),                              \
        LVSF_FONT_REGISTER(freetype_font, 13),                              \
        LVSF_FONT_REGISTER(freetype_font, 14),                              \
        LVSF_FONT_REGISTER(freetype_font, 15),                              \
        LVSF_FONT_REGISTER(freetype_font, 16),                              \
        LVSF_FONT_REGISTER(freetype_font, 17),                              \
        LVSF_FONT_REGISTER(freetype_font, 18),                              \
        LVSF_FONT_REGISTER(freetype_font, 19),                              \
        LVSF_FONT_REGISTER(freetype_font, 20),                              \
        LVSF_FONT_REGISTER(freetype_font, 21),                              \
        LVSF_FONT_REGISTER(freetype_font, 22),                              \
        LVSF_FONT_REGISTER(freetype_font, 23),                              \
        LVSF_FONT_REGISTER(freetype_font, 24),                              \
        LVSF_FONT_REGISTER(freetype_font, 25),                              \
        LVSF_FONT_REGISTER(freetype_font, 26),                              \
        LVSF_FONT_REGISTER(freetype_font, 27),                              \
        LVSF_FONT_REGISTER(freetype_font, 28),                              \
        LVSF_FONT_REGISTER(freetype_font, 29),                              \
        LVSF_FONT_REGISTER(freetype_font, 30),                              \
        LVSF_FONT_REGISTER(freetype_font, 31),                              \
        LVSF_FONT_REGISTER(freetype_font, 32),                              \
        LVSF_FONT_REGISTER(freetype_font, 33),                              \
        LVSF_FONT_REGISTER(freetype_font, 34),                              \
        LVSF_FONT_REGISTER(freetype_font, 35),                              \
        LVSF_FONT_REGISTER(freetype_font, 36),                              \
        LVSF_FONT_REGISTER(freetype_font, 37),                              \
        LVSF_FONT_REGISTER(freetype_font, 38),                              \
        LVSF_FONT_REGISTER(freetype_font, 39),                              \
        LVSF_FONT_REGISTER(freetype_font, 40),                              \
        LVSF_FONT_REGISTER(freetype_font, 41),                              \
        LVSF_FONT_REGISTER(freetype_font, 42),                              \
        LVSF_FONT_REGISTER(freetype_font, 43),                              \
        LVSF_FONT_REGISTER(freetype_font, 44),                              \
        LVSF_FONT_REGISTER(freetype_font, 45),                              \
        LVSF_FONT_REGISTER(freetype_font, 46),                              \
        LVSF_FONT_REGISTER(freetype_font, 47),                              \
        LVSF_FONT_REGISTER(freetype_font, 48),                              \
        LVSF_FONT_REGISTER(freetype_font, 49),                              \
        LVSF_FONT_REGISTER(freetype_font, 50),                              \
        LVSF_FONT_REGISTER(freetype_font, 51),                              \
        LVSF_FONT_REGISTER(freetype_font, 52),                              \
        LVSF_FONT_REGISTER(freetype_font, 53),                              \
        LVSF_FONT_REGISTER(freetype_font, 54),                              \
        LVSF_FONT_REGISTER(freetype_font, 55),                              \
        LVSF_FONT_REGISTER(freetype_font, 56),                              \
        LVSF_FONT_REGISTER(freetype_font, 57),                              \
        LVSF_FONT_REGISTER(freetype_font, 58),                              \
        LVSF_FONT_REGISTER(freetype_font, 59),                              \
        LVSF_FONT_REGISTER(freetype_font, 60),                              \
    };

#endif

emoji字体增删

  1. 新增: 把新增的emoji图片放在solution\examples\xxx\resource\images_emoji\common\ezip目录,注意图片名字的命名为emoji_xxx.png。其中xxx为emoji的unicode,比如unicode为1f46d的emoji图片,则命名为emoji_1f46d.png

  2. 删除: 删除对应的图片即可

字体显示的流程

为支持多语言,可能需要多个ttf组合才能包括所有的多语言。字体显示的流程是

  1. 设置字体(ttf)顺序,注册一个字体的链表font_list。

  2. 创建一个空的cache_list,

  3. 根据text的每个unicode获取bitmap

  • 如果cache_list中找到该unicode对应的bitmap,则调用lv_draw_letter显示;否则则存入cache_list,然后调用lv_draw_letter显示

  • 如果存入cache_list时候发现超出了cache的容量,则清除部分cache,然后存入存入cache_list

  1. 显示速度取决于显示的unicode在哪个ttf,以及是否在cache_list中。也就是说,unciode在font_list前面或者在cache_list中查找到,则显示越快。否则就会进入freetype去获取字形,然后渲染,这样速度就会稍微慢一些。

代码中使用ttf字体

  1. 代码中使用自动选择字体: lv_ext_set_local_font(lv_obj_t *obj, uint16_t size, lv_color_t color)

 lv_obj_t *calorie = lv_label_create(bg_img);
 lv_ext_set_local_font(calorie, FONT_SUBTITLE, lv_color_make(255, 255, 255));
 lv_label_set_text(calorie, app_get_str(key_calorie, "calorie"));
  1. 代码中使用指定字体: lv_ext_label_set_indicated_font(lv_obj_t *obj, uint16_t size, lv_color_t color, const char *font_name)

 lv_obj_t *calorie_lab = lv_label_create(bg_img);
 lv_ext_set_local_font(calorie_lab, FONT_SUBTITLE, lv_color_make(255, 255, 255));
 lv_ext_label_set_indicated_font(calorie, app_get_str(key_calorie, "calorie"), "HarmonyOS_Sans_SC_Bold");

代码中重新设置字体顺序

以下接口只能在gui_thread中使用,不能跨线程

  1. lvsf_font_set_order(char **font_name, uint16_t font_num)

  • 接口说明:调整字体的顺序,把font_name指定的字体放在最前面。

  • font_name:字符串数组,需要放在前面的字体.

  • font_num:需要调整顺序的字体个数

例:假定字体list为:tiny5_fullhindiarabHarmonyOS_Sans_SC_Bold。调整arab、hindi到最前面。适用于语言切换的时候调整ttf的访问顺序。

 char *font_name[32] = {"arab", "hindi"};
 uint16_t font_num = 2;
 lvsf_font_set_order(font_name, font_num);

结果为:arabhinditiny5_fullHarmonyOS_Sans_SC_Bold

  1. lvsf_font_set_order_reverse(char **font_name, uint16_t font_num)

  • 接口说明:调整字体的顺序,把font_name指定的字体放在最后面

例:假定字体list为:tiny5_fullhindiarabHarmonyOS_Sans_SC_Bold。调整arab到最后面。适用于语言切换的时候调整ttf的访问顺序。

 char *font_name[32] = {"arab"};
 uint16_t font_num = 1;
 lvsf_font_set_order_reverse(font_name, font_num);

结果为:tiny5_fullhindiHarmonyOS_Sans_SC_Boldarab

  1. lvsf_font_reset_order(void)

  • 接口说明:恢复调整字体的顺序为开机时的顺序。

重新设置某个字体支持的字号

以下接口只能在gui_thread中使用,不能跨线程。

  1. lvsf_set_font_size_by_name(char *font_name, int *size)

  • 接口说明:调整该字体支持的size。 注意:字体的字号必须是从小到大的排列。

例:假定该字体支持的size为:16, 20, 24, 28, 36, 56,分别对应 FONT_SMALL, FONT_NORMAL, FONT_SUBTITLE, FONT_TITLE, FONT_BIGL, FONT_HUGE

 char *font_name[32] = {"arab"};
 int size[] = {20, 22, 0}; //end with 0
 lvsf_set_font_size_by_name(font_name, font_num);

结果为:20, 22, 24, 28, 36, 56。即,该字体的FONT_SMALL变成了20FONT_NORMAL变成了22

  1. lvsf_reset_font_size_by_name(char *font_name)

  • 接口说明:恢复调整该字体为开机时默认的size。

设置支持bitmap(点阵)

  1. Solution通过以下的menuconfig配置来使能bitmap

  1. watch产品点阵(bitmap)的c文件放在如下目录。(其他的产品类似)

  1. 代码中调用bitmap的示例: lv_ext_set_local_bitmap_font

    lv_obj_t *keybord = lv_keyboard_create(parent);
    lv_obj_set_width(keybord, LV_HOR_RES_MAX);
    lv_keyboard_set_mode(keybord, LV_KEYBOARD_MODE_TEXT_LOWER);
    lv_keyboard_set_textarea(keybord, ta);
    lv_obj_align_to(keybord, ta, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
#ifdef USING_BITMAP_FONT
    lv_ext_set_local_bitmap_font(keybord, LV_COLOR_BLACK, lv_font_montserrat_16);
#else
    lv_ext_set_local_font(keybord, FONT_NORMAL, lv_color_make(0xFF, 0x00, 0x00));
#endif
    lv_obj_refr_size(keybord);

    lv_obj_add_event_cb(ta, setting_bt_name_ta_event_cb, LV_EVENT_ALL, keybord);

注意:

  1. Solution中通过以上配置就能使用点阵,不需要在SDK中进行任何bitmap的配置。

  2. 使用lv_ext_set_local_bitmap_font接口调用点阵字体(如上面代码中lv_font_montserrat_16)需要在resource\fonts\bitmap中有对应字体的定义。

引用外置ttf字体

除内置字体外,Solution 还支持使用外置字体(如通过蓝牙/Wi-Fi 推送至文件系统的字体,或直接访问 U 盘/TF 卡中的字体),相关操作接口如下:

  1. int lvsf_font_load_ex(char *font_path, uint16_t *size)
    从指定路径(font_path)加载字体:可加载该目录下所有字体,或通过路径直接文件名(含 .ttf 后缀)加载单个字体。加载后字体将插入字体链表,但默认处于未启用状态。加载完成后,可通过 lvsf_font_trav_ex 接口查询已加载的外置字体。

  2. int lvsf_font_set_enable(char *font_name, int enable)
    启用/禁用指定名称(font_name)的字体。注意:启用字体后会占用内存(NAND/eMMC 方案尤为明显),需控制加载数量,尤其是大容量字体。

  3. void lvsf_font_unload_ex(char *font_path)
    从字体链表中卸载指定路径(font_path)下的所有字体,或通过路径+文件名卸载单个字体(含 .ttf 后缀)。

  4. char *lvsf_font_trav_ex(rt_list_t **list, int ex)
    遍历字体链表,获取所有已加载的外置字体信息。