⚡

Makepad字体渲染技能Skill makepad-font

Makepad字体渲染技能是一个专业用于在Makepad框架中进行字体配置、文本布局和GPU-based文本渲染的工具。它利用SDF（签名距离场）技术确保文本在任何分辨率下保持清晰，支持字体家族、大小、样式配置，以及文本整形和布局管理。关键词：Makepad, 字体渲染, 文本布局, SDF, GPU, 字体配置, 文本整形, 字体图集, 前端开发, UI框架

前端开发 0 次安装 0 次浏览 更新于 3/13/2026

name: makepad-font description: | 关键：用于Makepad字体和文本渲染。触发词： makepad字体, makepad文本, makepad字形, makepad排版, 字体图集, 文本布局, 字体家族, 字体大小, 文本整形, makepad 字体, makepad 文字, makepad 排版, makepad 字形

Makepad字体技能

版本： makepad-widgets（开发分支） | 最后更新： 2026-01-19 检查更新：https://crates.io/crates/makepad-widgets

您是Makepad文本和字体渲染的专家。通过以下方式帮助用户：

  • 字体配置：字体家族、大小、样式
  • 文本布局：理解文本布局器和整形
  • 文本渲染：基于GPU的文本渲染，使用SDF

文档

参考本地文件获取详细文档：

  • ./references/font-system.md - 字体模块结构和API

重要：文档完整性检查

在回答问题之前，Claude必须：

  1. 阅读上面列出的相关参考文件
  2. 如果文件读取失败或文件为空：
    • 通知用户：“本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档”
    • 仍基于SKILL.md模式 + 内置知识回答
  3. 如果参考文件存在，将其内容整合到答案中

文本模块结构

draw/src/text/
├── font.rs           # 字体句柄和指标
├── font_atlas.rs     # GPU纹理图集用于字形
├── font_face.rs      # 字体面数据
├── font_family.rs    # 字体家族管理
├── fonts.rs          # 内置字体
├── glyph_outline.rs  # 字形向量轮廓
├── glyph_raster_image.rs # 栅格化字形图像
├── layouter.rs       # 文本布局引擎
├── rasterizer.rs     # 字形栅格化
├── sdfer.rs          # 签名距离场生成器
├── selection.rs      # 文本选择/光标
├── shaper.rs         # 文本整形（harfbuzz）

在DSL中使用字体

文本样式

<Label> {
    text: "Hello World"
    draw_text: {
        text_style: {
            font: { path: dep("crate://self/resources/fonts/MyFont.ttf") }
            font_size: 16.0
            line_spacing: 1.5
            letter_spacing: 0.0
        }
        color: #FFFFFF
    }
}

主题字体

<Label> {
    text: "Styled Text"
    draw_text: {
        text_style: <THEME_FONT_REGULAR> {
            font_size: (THEME_FONT_SIZE_P)
        }
    }
}

字体定义在DSL中

live_design! {
    // 定义字体路径
    FONT_REGULAR = {
        font: { path: dep("crate://self/resources/fonts/Regular.ttf") }
    }

    FONT_BOLD = {
        font: { path: dep("crate://self/resources/fonts/Bold.ttf") }
    }

    // 在部件中使用
    <Label> {
        draw_text: {
            text_style: <FONT_REGULAR> {
                font_size: 14.0
            }
        }
    }
}

Layouter API

pub struct Layouter {
    loader: Loader,
    cache_size: usize,
    cached_params: VecDeque<OwnedLayoutParams>,
    cached_results: HashMap<OwnedLayoutParams, Rc<LaidoutText>>,
}

impl Layouter {
    pub fn new(settings: Settings) -> Self;
    pub fn rasterizer(&self) -> &Rc<RefCell<Rasterizer>>;
    pub fn is_font_family_known(&self, id: FontFamilyId) -> bool;
    pub fn define_font_family(&mut self, id: FontFamilyId, definition: FontFamilyDefinition);
    pub fn define_font(&mut self, id: FontId, definition: FontDefinition);
    pub fn get_or_layout(&mut self, params: impl LayoutParams) -> Rc<LaidoutText>;
}

布局参数

pub struct OwnedLayoutParams {
    pub text: Substr,
    pub spans: Box<[Span]>,
    pub options: LayoutOptions,
}

pub struct Span {
    pub style: Style,
    pub len: usize,
}

pub struct Style {
    pub font_family_id: FontFamilyId,
    pub font_size_in_pts: f32,
    pub color: Option<Color>,
}

pub struct LayoutOptions {
    pub max_width_in_lpxs: Option<f32>,  // 最大宽度用于换行
    pub wrap: bool,                       // 启用单词换行
    pub first_row_indent_in_lpxs: f32,    // 首行缩进
}

Rasterizer设置

pub struct Settings {
    pub loader: loader::Settings,
    pub cache_size: usize,  // 默认：4096
}

pub struct rasterizer::Settings {
    pub sdfer: sdfer::Settings {
        padding: 4,     // SDF填充
        radius: 8.0,    // SDF半径
        cutoff: 0.25,   // SDF截止
    },
    pub grayscale_atlas_size: Size::new(4096, 4096),
    pub color_atlas_size: Size::new(2048, 2048),
}

DrawText部件

<View> {
    // Label是一个简单的文本部件
    <Label> {
        text: "Simple Label"
        draw_text: {
            color: #FFFFFF
            text_style: {
                font_size: 14.0
            }
        }
    }

    // TextFlow用于富文本
    <TextFlow> {
        <Bold> { text: "Bold text" }
        <Italic> { text: "Italic text" }
        <Link> {
            text: "Click here"
            href: "https://example.com"
        }
    }
}

文本属性

属性 类型 描述
text 字符串 文本内容
font 字体 字体资源
font_size f64 大小，单位点
line_spacing f64 行高乘数
letter_spacing f64 字符间距
color Vec4 文本颜色
brightness f64 文本亮度
curve f64 文本曲线效果

当回答问题时

  1. Makepad使用SDF（签名距离场）确保在任何尺度下文本清晰
  2. 字体加载一次并缓存在GPU纹理图集中
  3. 文本整形使用harfbuzz进行正确的字形定位
  4. 使用dep("crate://...")用于嵌入式字体资源
  5. 默认字体缓存大小是4096个字形
  6. 图集大小：4096x4096用于灰度，2048x2048用于颜色（表情符号）