没志青年
发布于 2025-09-10 / 30 阅读
0

04 LVGL 字体和图标

使用内置字体

LVGL内置字体和图标:Font (lv_font) - LVGL 9.4 documentation

自带的字体如果使用的话,在 lv_conf.h 文件中设置为 1:

#define LV_FONT_MONTSERRAT_8 0
#define LV_FONT_MONTSERRAT_10 0
#define LV_FONT_MONTSERRAT_12 0
#define LV_FONT_MONTSERRAT_14 1
#define LV_FONT_MONTSERRAT_16 0
#define LV_FONT_MONTSERRAT_18 1

图标的使用:

lv_label_set_text(my_label, LV_SYMBOL_OK);
lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);

使用自定义字体

字体转换网站:Font Converter — LVGL

使用前需定义一下:

LV_FONT_DECLARE(ui_font_fyt_thin_18);

提取字体文件中用到的字符,方便替换为其他字体。

import re
import sys

def extract_unicode_chars(file_path):
    """
    从.c文件中提取 /* U+XXXX "字符" */ 中的字符,并合并成一句话
    :param file_path: .c文件路径
    :return: 拼接后的字符串
    """
    pattern = r'/\*\s*U\+[0-9A-Fa-f]{4,6}\s*"([^"]*)"\s*\*/'  # 提取引号内的内容
    
    try:
        with open(file_path, 'r', encoding='utf-8') as file:
            content = file.read()
            chars = re.findall(pattern, content)
            combined = ''.join(chars)  # 拼接所有匹配的字符
            return combined
    except FileNotFoundError:
        print(f"错误:文件 {file_path} 未找到")
        return ""
    except Exception as e:
        print(f"读取文件时发生错误: {e}")
        return ""

if __name__ == "__main__":
    if len(sys.argv) != 2:
        print("用法: python extract_chars.py <文件路径>")
        sys.exit(1)
    
    file_path = sys.argv[1]
    result = extract_unicode_chars(file_path)
    
    print(f"提取的字符拼接结果: {result}")

使用自定义图标

(1)打开 iconfont-阿里巴巴矢量图标库,【资源管理】【我的项目】

(2)解压后在目录中执行 python 脚本:

from bs4 import BeautifulSoup

def unicode_to_utf8_escape(code: str) -> str:
    """将 &#xe653; 形式的编码转成 UTF-8 转义序列(如 \\xEE\\x99\\x93)"""
    codepoint = int(code.replace("&#x", "").replace(";", ""), 16)
    utf8_bytes = chr(codepoint).encode("utf-8")
    return ''.join(f'\\x{b:02x}' for b in utf8_bytes)

def extract_and_build(file_path: str):
    with open(file_path, 'r', encoding='utf-8') as f:
        html = f.read()

    soup = BeautifulSoup(html, 'html.parser')

    unicode_div = soup.find('div', class_='content unicode')
    fontclass_div = soup.find('div', class_='content font-class')

    # --------------------------
    # 第一部分:提取 Unicode 编码和中文名
    # --------------------------
    unicode_codes, icon_names = [], []
    for li in unicode_div.select('li.dib'):
        code_div = li.find('div', class_='code-name')
        name_div = li.find('div', class_='name')
        if code_div and name_div:
            unicode_codes.append(code_div.text.strip())
            icon_names.append(name_div.text.strip())

    # --------------------------
    # 第二部分:提取 font-class 样式名
    # --------------------------
    font_classes = []
    for li in fontclass_div.select('li.dib'):
        code_div = li.find('div', class_='code-name')
        if code_div:
            font_classes.append(code_div.text.strip().replace('.', ''))

    # --------------------------
    # 转换 Unicode → UTF-8
    # --------------------------
    unicode_hex_list = [u.replace('&#x', '0x').replace(';', '') for u in unicode_codes]
    utf8_hex_list = [unicode_to_utf8_escape(u) for u in unicode_codes]

    # --------------------------
    # 生成宏定义
    # --------------------------
    lines = []
    for cls, utf8, hex_code, name in zip(font_classes, utf8_hex_list, unicode_hex_list, icon_names):
        utf8_fixed = ''.join(f'\\x{b:02X}' for b in bytes.fromhex(utf8.replace('\\x', '')))
        macro_name = f"USER_{cls.upper().replace('-', '_')}"
        line = f'#define {macro_name:<35} "{utf8_fixed}"      // {hex_code}, {name}'
        lines.append(line)
        
  

    # --------------------------
    # 输出拼接
    # --------------------------
    output = []
    output.append("Unicode 编码:")
    output.append(','.join(unicode_hex_list))
    output.append("\nUTF-8 编码:")
    output.append(','.join(utf8_hex_list))
    output.append("\n\n// 自定义图标宏定义:")
    output.extend(lines)

    return '\n'.join(output)

# ======= 运行示例 =======
if __name__ == "__main__":
    result = extract_and_build("demo_index.html")
    print(result)

输出以下内容:

(3)打开 Font Converter — LVGL

(4)程序中用的是 UTF-8 格式的,把下面这个复制到程序中,直接用 USER_SYMBOL_xxxx 就行了

// 自定义图标:
#define USER_SYMBOL_E619                "\XEE\X98\X99"  // 0xe619
#define USER_SYMBOL_E600                "\XEE\X98\X80"  // 0xe600
#define USER_SYMBOL_E603                "\XEE\X98\X83"  // 0xe603
#define USER_SYMBOL_E615                "\XEE\X98\X95"  // 0xe615
#define USER_SYMBOL_E62E                "\XEE\X98\XAE"  // 0xe62e
#define USER_SYMBOL_E67D                "\XEE\X99\XBD"  // 0xe67d
#define USER_SYMBOL_E64E                "\XEE\X99\X8E"  // 0xe64e
#define USER_SYMBOL_EC4A                "\XEE\XB1\X8A"  // 0xec4a
#define USER_SYMBOL_E634                "\XEE\X98\XB4"  // 0xe634
#define USER_SYMBOL_E60F                "\XEE\X98\X8F"  // 0xe60f
#define USER_SYMBOL_EB31                "\XEE\XAC\XB1"  // 0xeb31
#define USER_SYMBOL_EA6D                "\XEE\XA9\XAD"  // 0xea6d
#define USER_SYMBOL_E6B7                "\XEE\X9A\XB7"  // 0xe6b7
#define USER_SYMBOL_E809                "\XEE\XA0\X89"  // 0xe809
#define USER_SYMBOL_E601                "\XEE\X98\X81"  // 0xe601
#define USER_SYMBOL_E652                "\XEE\X99\X92"  // 0xe652
#define USER_SYMBOL_E696                "\XEE\X9A\X96"  // 0xe696
#define USER_SYMBOL_E6E1                "\XEE\X9B\XA1"  // 0xe6e1
#define USER_SYMBOL_E602                "\XEE\X98\X82"  // 0xe602
#define USER_SYMBOL_E69B                "\XEE\X9A\X9B"  // 0xe69b
#define USER_SYMBOL_E604                "\XEE\X98\X84"  // 0xe604
#define USER_SYMBOL_E63E                "\XEE\X98\XBE"  // 0xe63e
#define USER_SYMBOL_E81B                "\XEE\XA0\X9B"  // 0xe81b

LVGL 字体合并流程